Project 3: E-commerce Website

—

by

admin
in

In this project, you’ll build a feature-rich E-commerce Website using Laravel. The application will include:

  1. Product Listings
  2. A Shopping Cart
  3. A Checkout System with Payment Gateway Integration

Lesson Outline

  1. Setting Up the Environment
  2. Designing the Database
  3. Implementing Product Listings
  4. Building the Shopping Cart
  5. Developing the Checkout System
  6. Integrating a Payment Gateway

Step 1: Setting Up the Environment

1.1 Install Laravel

Follow the steps from Lesson 19 to install Laravel:

  1. Install Laravel using Composer:
    bash
    composer create-project --prefer-dist laravel/laravel ecommerce
  2. Navigate to the project directory:
    bash
    cd ecommerce

1.2 Configure the Database

  1. Create a MySQL database named ecommerce.
  2. Update the .env file with your database credentials:
    env
    DB_CONNECTION=mysql
    DB_HOST=127.0.0.1
    DB_PORT=3306
    DB_DATABASE=ecommerce
    DB_USERNAME=root
    DB_PASSWORD=yourpassword
  3. Run the migration command to ensure Laravel’s default migrations are applied:
    bash
    php artisan migrate

Step 2: Designing the Database

2.1 Database Tables

1. Products Table

Run the migration:

bash
php artisan make:migration create_products_table

Define the schema:

php
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->text('description');
$table->decimal('price', 10, 2);
$table->string('image')->nullable();
$table->timestamps();
});
}

2. Orders Table

Run the migration:

bash
php artisan make:migration create_orders_table

Define the schema:

php
public function up()
{
Schema::create('orders', function (Blueprint $table) {
$table->id();
$table->decimal('total', 10, 2);
$table->string('status')->default('pending');
$table->timestamps();
});
}

3. Order Items Table

Run the migration:

bash
php artisan make:migration create_order_items_table

Define the schema:

php
public function up()
{
Schema::create('order_items', function (Blueprint $table) {
$table->id();
$table->foreignId('order_id')->constrained()->onDelete('cascade');
$table->foreignId('product_id')->constrained()->onDelete('cascade');
$table->integer('quantity');
$table->decimal('price', 10, 2);
$table->timestamps();
});
}

Run all migrations:

bash
php artisan migrate

Step 3: Implementing Product Listings

3.1 Seed Products Data

Create a seeder:

bash
php artisan make:seeder ProductSeeder

Define sample products in database/seeders/ProductSeeder.php:

php

use App\Models\Product;

public function run()
{
Product::create([
‘name’ => ‘Laptop’,
‘description’ => ‘A high-performance laptop.’,
‘price’ => 1200.00,
‘image’ => ‘laptop.jpg’,
]);
Product::create([
‘name’ => ‘Smartphone’,
‘description’ => ‘A sleek smartphone.’,
‘price’ => 800.00,
‘image’ => ‘smartphone.jpg’,
]);
}

Run the seeder:

bash
php artisan db:seed --class=ProductSeeder

3.2 Create Routes and Controller

  1. Create a ProductController:
    bash
    php artisan make:controller ProductController
  2. Define routes in routes/web.php:
    php

    use App\Http\Controllers\ProductController;

    Route::get(‘/’, [ProductController::class, ‘index’]);

  3. Add a method to fetch and display products:
    php
    public function index()
    {
    $products = Product::all();
    return view('products.index', compact('products'));
    }

3.3 Create a Blade Template for Product Listings

Create resources/views/products/index.blade.php:

html
<h1>Products</h1>
@foreach ($products as $product)
<div>
<img src="{{ asset('images/' . $product->image) }}" alt="{{ $product->name }}" width="100">
<h2>{{ $product->name }}</h2>
<p>{{ $product->description }}</p>
<p>${{ $product->price }}</p>
<form action="{{ route('cart.add', $product->id) }}" method="POST">
@csrf
<button type="submit">Add to Cart</button>
</form>
</div>
@endforeach

Step 4: Building the Shopping Cart

4.1 Install a Cart Package

Install the Gloudemans/Shoppingcart package:

bash
composer require bumbummen99/shoppingcart

4.2 Create CartController

  1. Create the controller:
    bash
    php artisan make:controller CartController
  2. Define routes in routes/web.php:
    php

    use App\Http\Controllers\CartController;

    Route::post(‘/cart/add/{product}’, [CartController::class, ‘add’])->name(‘cart.add’);
    Route::get(‘/cart’, [CartController::class, ‘index’])->name(‘cart.index’);
    Route::post(‘/cart/remove/{rowId}’, [CartController::class, ‘remove’])->name(‘cart.remove’);

4.3 Implement Cart Functionality

In CartController:

Add to Cart

php
public function add(Product $product)
{
\Cart::add($product->id, $product->name, 1, $product->price);
return redirect()->route('cart.index')->with('success', 'Product added to cart.');
}

View Cart

php
public function index()
{
$cartItems = \Cart::content();
return view('cart.index', compact('cartItems'));
}

Remove from Cart

php
public function remove($rowId)
{
\Cart::remove($rowId);
return redirect()->route('cart.index')->with('success', 'Product removed from cart.');
}

4.4 Create a Blade Template for the Cart

Create resources/views/cart/index.blade.php:

html
<h1>Shopping Cart</h1>
@foreach ($cartItems as $item)
<div>
<h2>{{ $item->name }}</h2>
<p>Quantity: {{ $item->qty }}</p>
<p>Price: ${{ $item->price }}</p>
<form action="{{ route('cart.remove', $item->rowId) }}" method="POST">
@csrf
<button type="submit">Remove</button>
</form>
</div>
@endforeach
<p>Total: ${{ \Cart::total() }}</p>
<a href="{{ route('checkout') }}">Proceed to Checkout</a>

Step 5: Developing the Checkout System

5.1 Create OrderController

  1. Create the controller:
    bash
    php artisan make:controller OrderController
  2. Define routes in routes/web.php:
    php

    use App\Http\Controllers\OrderController;

    Route::get(‘/checkout’, [OrderController::class, ‘index’])->name(‘checkout’);
    Route::post(‘/checkout’, [OrderController::class, ‘store’])->name(‘checkout.store’);

  3. Add methods in OrderController:

Show Checkout Form

php
public function index()
{
$cartItems = \Cart::content();
return view('checkout.index', compact('cartItems'));
}

Store Order

php
public function store(Request $request)
{
$order = Order::create([
'total' => \Cart::total(),
'status' => 'pending',
]);foreach (\Cart::content() as $item) {
$order->items()->create([
‘product_id’ => $item->id,
‘quantity’ => $item->qty,
‘price’ => $item->price,
]);
}

\Cart::destroy();
return redirect(‘/’)->with(‘success’, ‘Order placed successfully.’);
}

5.2 Create Checkout Form

Create resources/views/checkout/index.blade.php:

html
<h1>Checkout</h1>
@foreach ($cartItems as $item)
<div>
<h2>{{ $item->name }}</h2>
<p>Quantity: {{ $item->qty }}</p>
<p>Price: ${{ $item->price }}</p>
</div>
@endforeach
<p>Total: ${{ \Cart::total() }}</p>
<form action="{{ route('checkout.store') }}" method="POST">
@csrf
<button type="submit">Place Order</button>
</form>

Step 6: Integrating a Payment Gateway

Use Stripe for payments:

  1. Install Stripe:
    bash
    composer require stripe/stripe-php
  2. Add Stripe Payment Integration in OrderController:
    php

    use Stripe\Stripe;

    public function store(Request $request)
    {
    Stripe::setApiKey(‘your-stripe-secret-key’);

    Stripe\Charge::create([
    ‘amount’ => \Cart::total() * 100,
    ‘currency’ => ‘usd’,
    ‘source’ => $request->stripeToken,
    ‘description’ => ‘Order Payment’,
    ]);

    // Create Order as before…
    }

Activities and Exercises

  1. Enhance Product Listings:
    • Add categories and filters (e.g., price range, search).
  2. Improve Cart UX:
    • Add “update quantity” functionality.
  3. Extend Checkout:
    • Include customer billing and shipping details.

Assignment

  1. Implement an admin panel for managing products.
  2. Add email notifications for order confirmation.

Summary

In this project, you:

  1. Built a dynamic E-commerce website with Laravel.
  2. Implemented product listings, a shopping cart, and a checkout system.
  3. Integrated a payment gateway for secure transactions.

This project covers essential features for building real-world e-commerce applications. Let me know if you need additional guidance or enhancements!

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *