Error Solution Watch on YouTube

#5- Setup Admin HTML themes (AdminLTE) | Laravel 10 E-Commerce

3 min read 1 year ago
Published on Aug 08, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial will guide you through the process of setting up the AdminLTE HTML theme within a Laravel 10 e-commerce application. AdminLTE is a popular admin dashboard template that provides a clean and responsive design, making it ideal for managing your e-commerce system. By following these steps, you will integrate the AdminLTE theme into your Laravel project effectively.

Step 1: Install Laravel

Before integrating the AdminLTE theme, ensure you have Laravel installed. If you haven't set up a Laravel project yet, follow these instructions:

  1. Open your terminal.
  2. Navigate to the directory where you want to create your project.
  3. Run the following command to create a new Laravel project:
    composer create-project --prefer-dist laravel/laravel your-project-name
  4. Navigate into your project folder:
    cd your-project-name

Step 2: Download AdminLTE

You need to download the AdminLTE theme to include it in your Laravel project.

  1. Visit the AdminLTE GitHub repository at AdminLTE GitHub.
  2. Click on the green "Code" button and select "Download ZIP."
  3. Extract the ZIP file to your computer.

Step 3: Add AdminLTE Files to Laravel

Now, you will copy the relevant AdminLTE files into your Laravel project.

  1. Open the extracted AdminLTE folder.
  2. Copy the dist folder and the plugins folder from AdminLTE.
  3. In your Laravel project, navigate to public directory.
  4. Paste the dist and plugins folders into the public directory.

Step 4: Create Blade Layout

You need to create a layout file to use AdminLTE components in your views.

  1. In your Laravel project, navigate to resources/views.
  2. Create a new folder called layouts.
  3. Inside the layouts folder, create a new file named app.blade.php.
  4. Open app.blade.php and add the following code:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ asset('dist/css/adminlte.min.css') }}">
    <script src="{{ asset('plugins/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('dist/js/adminlte.min.js') }}"></script>
    <title>AdminLTE</title>
</head>
<body class="hold-transition sidebar-mini">
    <div class="wrapper">
        @yield('content')
    </div>
</body>
</html>

Step 5: Create a Sample View

To ensure that AdminLTE is working properly, create a sample view.

  1. In resources/views, create a new file named dashboard.blade.php.
  2. Add the following code to dashboard.blade.php:
    @extends('layouts.app')

@section('content')
<div class="content-wrapper">
    <section class="content">
        <h1>Welcome to AdminLTE Dashboard</h1>
        <p>This is a sample dashboard page.</p>
    </section>
</div>
@endsection

Step 6: Set Up Routes

You need to define a route to access the dashboard view you just created.

  1. Open routes/web.php.
  2. Add the following route:
    Route::get('/dashboard', function () {
    return view('dashboard');
});

Step 7: Test the Setup

Now it's time to test your setup and see if everything works as expected.

  1. Start the Laravel development server:
    php artisan serve
  2. Open your web browser and navigate to http://localhost:8000/dashboard.
  3. You should see the AdminLTE dashboard displaying your sample content.

Conclusion

You have successfully integrated the AdminLTE HTML theme into your Laravel 10 e-commerce application. You can now customize your dashboard and add more features as needed. For further enhancements, consider exploring AdminLTE's extensive components and plugins to enrich your admin panel. Happy coding!

Table of Contents

Recent