software-development-company-logo

Tag: Project 3: E-commerce Website

  • Project 3: E-commerce Website

    Section 1: Introduction to PHP
    Section 2: PHP Fundamentals
    Section 3: Working with Forms and User Input
    Section 4: Object-Oriented PHP
    Section 5: PHP and Databases
    Section 6: Advanced PHP Concepts
    Section 7: Real-World Projects
    Section 8: PHP Best Practices

    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!