Introduction to Laravel & Project Setup

Step 1: Project Setup

In these content we learn how to set up your Laravel project for a simple e-commerce website name ecommerce. Step-by-step guide for beginners with installation, configuration, and first routes.

Introduction

In today’s digital era, creating an online store is one of the most valuable skills for developers and entrepreneurs alike. Whether you want to launch a small business, test new products, or simply learn web development, an e-commerce website is a fantastic project to start with and portfolio of the developers.

Laravel, a PHP framework, has become one of the most popular tools for building modern web applications. Its clean syntax, robust features, and strong community support make it an excellent choice for creating an e-commerce platform. In this tutorial series, we will build a simple yet functional e-commerce website from scratch using Laravel.

In this first post, we will focus on setting up your Laravel project. This includes installing Laravel, configuring the database, creating your first route, controller, and view, and understanding the directory structure. By the end of this post, your Laravel environment will be ready, and you’ll have a solid foundation for the next steps in building your e-commerce platform.

Why Laravel for E-commerce?

Before diving into setup, let’s briefly discuss why Laravel is ideal for e-commerce development:

Clean and Elegant Syntax: Laravel is designed to be intuitive, allowing developers to write readable and maintainable code.
MVC Architecture: Laravel uses the Model-View-Controller pattern, which separates logic, presentation, and data. This makes your application easier to maintain and scale.
Database Management: Laravel’s Eloquent ORM makes database interactions simple. You can define relationships between tables without writing complex SQL queries.
Security: Laravel offers built-in authentication, password hashing, and protection against SQL injection and XSS attacks.
Community & Documentation: Laravel has a strong community and extensive documentation, making it easy to find solutions and tutorials.

Step 1: Prepare Your Environment

Before installing Laravel, you need to ensure your development environment is ready. Laravel requires:

PHP 8.1 or higher
Composer – PHP package manager
MySQL or PostgreSQL – Database
Node.js and npm – For compiling assets like CSS and JavaScript

To check if your environment is ready, open a terminal and run:

php -v
composer -v
node -v
npm -v

If you see version numbers for all, you’re good to go. If not, you’ll need to install the missing components before proceeding.

Step 2: Install Laravel

Laravel can be installed via Composer. Open your terminal and navigate to the folder where you want your project to reside. Then run:

composer create-project laravel/laravel ecommerce

This command will create a new Laravel project named ecommerce. Depending on your internet speed, this may take a few minutes.

Once installed, navigate into your project folder:

cd ecommerce

You can start the development server to check if everything is working:

php artisan serve

Open your browser and go to http://127.0.0.1:8000. You should see the Laravel welcome page. Congratulations! Your first Laravel project is running.

Step 3: Understanding Laravel Directory Structure

Laravel’s directory structure may look overwhelming at first, but understanding it is crucial for efficient development. Here’s a quick overview of the most important folders:

app/ – Contains the core application logic, including models, controllers, and middleware.
bootstrap/ – Contains files for bootstrapping the application and loading configurations.
config/ – All configuration files (database, mail, app settings).
database/ – Contains migrations, seeders, and factories.
public/ – The web root folder, containing index.php and assets like CSS, JavaScript, and images.
resources/views/ – Blade templates for the frontend of your website.
routes/ – Contains route files. web.php is for web routes, api.php for API routes.
vendor/ – Contains Composer dependencies.

Understanding this structure will help you navigate the project easily and maintain code efficiently.

Step 4: Configure the Database

Laravel uses a .env file to store environment-specific settings, including the database connection. Open the .env file in the root of your project and update the database credentials:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=ecommerce
DB_USERNAME=root
DB_PASSWORD=root

Make sure you have created a database named ecommerce in MySQL (or PostgreSQL) before running migrations. You can create the database using the command line or tools like phpMyAdmin:

CREATE DATABASE ecommerce;

Once your database is ready, test the connection by running Laravel migrations:

php artisan migrate

If everything is configured correctly, you should see messages indicating that the default tables (like users and password_resets) have been created.

Step 5: Create Your First Route, Controller, and View

Laravel uses the MVC pattern, so let’s create a simple homepage for our e-commerce site.

1. Create a Route

Open routes/web.php and add:

use App\Http\Controllers\HomeController;

Route::get('/', [HomeController::class, 'index']);

This route maps the homepage URL (/) to the index method in HomeController.

2. Create a Controller

Run the following command to create a controller:

php artisan make:controller HomeController

Open app/Http/Controllers/HomeController.php and add:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class HomeController extends Controller
{
    public function index()
    {
        return view('welcome');
    }
}

3. Create a View

Laravel uses Blade as its templating engine. Open resources/views/welcome.blade.php. This is the default welcome page, which you can customize with your e-commerce brand:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Laravel E-commerce</title>
</head>
<body>
    <h1>Welcome to My Laravel E-commerce Website</h1>
    <p>This is the starting point for our amazing e-commerce journey!</p>
</body>
</html>

Open your browser and go to http://127.0.0.1:8000. You should see your custom welcome message.

Step 6: Add Some Basic Styling

To make the homepage visually appealing, we can include Tailwind CSS, a modern utility-first CSS framework. Add this inside the <head> section of your Blade view:

<script src="https://cdn.tailwindcss.com"></script>

Then, style your content using Tailwind classes:

<body class="bg-gray-100 flex items-center justify-center h-screen">
    <div class="text-center">
        <h1 class="text-4xl font-bold text-blue-600 mb-4">Welcome to My Laravel E-commerce Website</h1>
        <p class="text-gray-700 text-lg">This is the starting point for our amazing e-commerce journey!</p>
    </div>
</body>

Your homepage should now look modern and clean without writing a single line of traditional CSS.

Step 7: Git Version Control (Optional but Recommended)

It’s a good practice to use version control from the start. Initialize Git in your project:

git init
git add .
git commit -m "Initial Laravel project setup"

This allows you to track changes, revert mistakes, and collaborate with others.

Tips for Beginners

Organize Your Files: Keep controllers, models, and views in a structured manner to avoid confusion later.
Secure Your .env File: Never share your .env file publicly; it contains sensitive credentials.
Use Artisan Commands: Laravel’s command-line tool (php artisan) simplifies tasks like migrations, controllers, and seeding.
Start Small: Focus on getting the project running first before adding complex features.
Learn by Doing: Try editing Blade templates and adding simple routes to understand how Laravel works.

What’s Next

Now that your Laravel project is up and running, the next step is database and models setup. In the next post, we’ll:

Create tables for products, categories, and orders.
Define relationships between tables using Eloquent.
Seed the database with sample data.

By the end of that tutorial, your e-commerce site will have a working database ready to store products and manage orders.

Conclusion

Setting up a Laravel project is the first crucial step toward building a professional e-commerce website. In this tutorial, we covered:

Installing Laravel and running the development server
Understanding the Laravel directory structure
Configuring the database and running migrations
Creating your first route, controller, and Blade view
Adding Tailwind CSS for basic styling
Setting up version control with Git

With a solid foundation in place, you’re now ready to move forward with building the core functionality of your e-commerce platform.

Call to Action:

If you found this guide helpful, don’t forget to bookmark it and follow the series. In the next post, we’ll dive into database design and models setup, where you’ll learn how to create the backbone of your e-commerce site