CRUD Application with Laravel & Tailwind CSS

 Introduction 

In this tutorial, we will build a simple CRUD (Create, Read, Update, Delete) application using Laravel and Tailwind CSS. CRUD operations are the backbone of most web applications. We'll cover database migrations, creating a product management system, and styling the interface with Tailwind CSS.

Step 1. Setting Up the Laravel Project

 Install Laravel: 

bash
composer create-project laravel/laravel laravel-tailwind-crud

Set up your .env file with database credentials:

env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-tailwind-crud
DB_USERNAME=root
DB_PASSWORD=

Step 2. Setting Up the Database

 Run the following command to generate the model and migration: 

bash
php artisan make:model Product -mcr

Set up your migration: open your create_products_table.php file

<?php

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

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('description');
            $table->string('image')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('products');
    }
};

Now run your migration by following this command:

bash
php artisan migrate

Step 3.  Setting up the ProductController

Create the index() function to display our data from database

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Product;
use Illuminate\Support\Facades\Storage;

public function index()
    {
        $products = Product::paginate(5);
        return view('products.index', compact('products'));
    }

Create the store() function so we can add and be able to save the data in our database

public function store(Request $request)
    {   
        $request->validate([
            'title' => 'required|string',
            'description' => 'required|string',
            'image' => 'nullable|image|mimes:jpeg,png,jpg,gif,svg|max:2048', // validate the image
        ]);
        
        
        $imagePath = null;
        if ($request->hasFile('image')) {
            $imagePath = $request->file('image')->store('images', 'public');
        }
        
        
        $product = Product::create([
            'title' => $request->title,
            'description' => $request->description,
            'image' => $imagePath, // Save the image path to the database
        ]);
        return redirect()->route('products.index');
    }

Create the update() function so we can edit and be able to update the data in our database

public function update(Request $request, Product $product)
    {   
        // Validate input
        $request->validate([
            'title' => 'required|string',
            'description' => 'required|string',
            'image' => 'nullable|image|mimes:jpeg,png,jpg,gif,svg|max:2048', // Validate image type and size
        ]);

        // Check if a file is uploaded
        if ($request->hasFile('image')) {
            // Delete the old image if it exists
            if ($product->image) {
                Storage::delete('public/' . $product->image);
            }

            // Store the new image in the 'images' directory of the 'public' disk
            $imagePath = $request->file('image')->store('images', 'public'); // This will store the file in storage/app/public/images
        } else {
            // Retain the old image if no new image is uploaded
            $imagePath = $product->image;
        }

        // Update the product with the form data
        $product->update([
            'title' => $request->title,
            'description' => $request->description,
            'image' => $imagePath, // Save the image path in the database
        ]);

        return redirect()->route('products.index');
    }

Then create the destroy() function so we can delete the data in our database

public function destroy(Product $product)
    {
        $product->delete();
        return redirect()->route('products.index');
    }

Step 4.  Add route to the web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;


Route::resource('products', ProductController::class);

Step 5.  Design the front end

 Create a layoute file : resources/views/layouts/app.blade.php layout  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Laravel Tailwind CRUD')</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Ensure Bootstrap Modal JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-6">
        @yield('content')
    </div>
</body>
</html>

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

@extends('layouts.app')

@section('title', 'Products')

@section('content')
<div class="container mx-auto p-4">
<h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white text-center">
    CRUD Application with Laravel & Tailwind CSS
</h1>
  <div class="bg-white shadow rounded-md">
    <div class="bg-gray-800 p-4 border-b border-gray-200">
    <div class="flex justify-between items-center bg-gray-800 text-white p-4 rounded">
        <h2 class="text-lg font-bold">Product Listing Manager</h2>
        <button class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 flex items-center" onclick="openCreateModal()">
            <i class="material-icons">&#xE147;</i>
            <span class="ml-2">Add New</span>
        </button>
    </div>
    </div>
    <table class="w-full text-sm text-left text-gray-600">
      <thead class="bg-gray-200">
        <tr>
          <!-- <th class="p-3">
            <span class="flex items-center">
              <input type="checkbox" id="selectAll" class="form-checkbox rounded">
              <label for="selectAll" class="ml-2"></label>
            </span>
          </th> -->
          <th class="p-3">Image</th>
          <th class="p-3">Title</th>
          <th class="p-3">Description</th>
          <th class="p-3">Date</th>
          <th class="p-3">Actions</th>
        </tr>
      </thead>
      <tbody>
      @foreach($products as $product)
        <tr class="bg-white hover:bg-gray-100">
          <!-- <td class="p-3">
            <span class="flex items-center">
              <input type="checkbox" id="checkbox1" class="form-checkbox rounded">
              <label for="checkbox1" class="ml-2"></label>
            </span>
          </td> -->
          <td class="p-3">
                @if($product->image)
                    <img src="{{ asset('storage/' . $product->image) }}" alt="Product Image" class="w-40 h-20 object-cover">
                @else
                    <img src="default-image.jpg" alt="Default Image" class="w-20 h-20">
                @endif
          </td>
          <td class="p-3">{{ $product->title }}</td>
          <td class="p-3">{{ $product->description }}</td>
          <td class="p-3">{{ $product->updated_at }}</td>
          <td class="p-3">
          <button onclick="openModal({{ $product->id }}, '{{ $product->title }}', '{{ $product->description }}', '{{ $product->image }}')" class="text-blue-500 hover:text-blue-700">
                            <i class="material-icons" title="Edit">&#xE254;</i>
          </button>
          <button onclick="openDeleteModal({{ $product->id }})" class="text-red-500 hover:text-red-700 ml-2">
            <i class="material-icons" title="Delete">&#xE872;</i>
          </button>
          </td>
        </tr>
      @endforeach
        <!-- Repeat for other rows -->
      </tbody>
    </table>
    <!-- Add Product Modal -->
    <div id="productModal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-50 hidden">
        <div class="bg-white rounded-lg shadow-lg w-96 p-6">
            <div class="flex justify-between items-center">
                <h2 class="text-xl font-bold" id="modalTitleHeader">Add Product</h2>
                <button onclick="closeProductModal()" class="text-gray-500 hover:text-gray-700">&times;</button>
            </div>
            <form id="productForm" action="{{ route('products.store') }}" method="POST" class="mt-4" enctype="multipart/form-data">
                @csrf
                <div class="mb-4">
                    <label for="title" class="block text-sm font-medium text-gray-700">Title</label>
                    <input type="text" id="productTitle" name="title" class="w-full p-2 border border-gray-300 rounded-md" placeholder="Product Title" required>
                </div>
                <div class="mb-4">
                    <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                    <textarea id="productDescription" name="description" class="w-full p-2 border border-gray-300 rounded-md" placeholder="Product Description" required></textarea>
                </div>
                <div class="mb-4">
                    <label for="image" class="block text-sm font-medium text-gray-700">Product Image</label>
                    <input type="file" id="productImage" name="image" class="w-full p-2 border border-gray-300 rounded-md">
                </div>
                <div class="flex justify-end">
                    <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600" id="saveButton">Save</button>
                </div>
            </form>
        </div>
    </div>
    <!-- Edit Modal -->
    <div id="editModal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-50 hidden" enctype="multipart/form-data">
            <div class="bg-white rounded-lg shadow-lg w-96 p-6">
                <div class="flex justify-between items-center">
                    <h2 class="text-xl font-bold">Edit Product</h2>
                    <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">&times;</button>
                </div>
                <form id="editForm" action="" method="POST" class="mt-4" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="mb-4">
                        <label for="title" class="block text-sm font-medium text-gray-700">Title</label>
                        <input type="text" id="modalTitle" name="title" class="w-full p-2 border border-gray-300 rounded-md" placeholder="Product Title">
                    </div>
                    <div class="mb-4">
                        <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                        <textarea id="modalDescription" name="description" class="w-full p-2 border border-gray-300 rounded-md" placeholder="Product Description"></textarea>
                    </div>
                    <div class="mb-4">
                        <label for="description" class="block text-sm font-medium text-gray-700">Image</label>
                        <img src="" alt="Product Image" class="w-40 h-20 object-cover" id="modalImage">
                        <input type="file" name="image" id="image" class="w-full p-2 border border-gray-300 rounded-md">
                    </div>
                    <div class="flex justify-end">
                        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Save Changes</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Delete Confirmation Modal -->
        <div id="deleteProductModal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-800 bg-opacity-50 hidden">
            <div class="bg-white rounded-lg shadow-lg w-96 p-6">
                <div class="flex justify-between items-center">
                    <h2 class="text-xl font-bold">Delete Product</h2>
                    <button onclick="closeDeleteModal()" class="text-gray-500 hover:text-gray-700">&times;</button>
                </div>
                <div class="mt-4">
                    <p>Are you sure you want to delete this product?</p>
                </div>
                <form id="deleteForm" action="" method="POST" class="mt-4">
                    @csrf
                    @method('DELETE')
                    <div class="flex justify-end">
                        <button type="submit" class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600">Delete</button>
                        <button type="button" onclick="closeDeleteModal()" class="bg-gray-300 text-black px-4 py-2 rounded ml-2">Cancel</button>
                    </div>
                </form>
            </div>
        </div>
        <div class="flex justify-between items-center p-4 border-t border-gray-200">
        <div class="text-gray-600">Showing 
            <b>{{ $products->firstItem() }}</b> to 
            <b>{{ $products->lastItem() }}</b> of 
            <b>{{ $products->total() }}</b> entries
        </div>
        {{ $products->links('pagination::tailwind') }} <!-- Pagination -->
    </div>
</div>
<script>
    // Function to open modal for creating a Product
    function openCreateModal() {
        document.getElementById('productModal').classList.remove('hidden');
        document.getElementById('modalTitleHeader').innerText = 'Add Product'; // Set header to "Add Product"
        document.getElementById('productForm').action = "{{ route('products.store') }}"; // Set action for store
        document.getElementById('productTitle').value = '';
        document.getElementById('productDescription').value = '';
        document.getElementById('productImage').value = '';
        document.getElementById('saveButton').innerText = 'Save'; // Ensure the button says "Save"
    }
    // Function to close the Product modal
    function closeProductModal() {
        document.getElementById('productModal').classList.add('hidden');
    }

    // Function to open modal and populate with data
    function openModal(productId = null, productTitle = '', productDescription = '', productImage = '') {
        document.getElementById('editModal').classList.remove('hidden');
        document.getElementById('modalTitle').value = productTitle;
        document.getElementById('modalDescription').value = productDescription;
        const modalImage = document.getElementById('modalImage');
        if (productImage) {
            modalImage.src = '{{ asset('storage/') }}' + '/' + productImage;
        } else {
            modalImage.src = 'default-image.jpg'; // Default image if none exists
        }
        document.getElementById('editForm').action = '/products/' + productId; // Update form action for the correct product
    }

    // Function to close the modal
    function closeModal() {
        document.getElementById('editModal').classList.add('hidden');
    }


    // Function to open the delete modal and set the form action
    function openDeleteModal(productId) {
        document.getElementById('deleteProductModal').classList.remove('hidden');
        document.getElementById('deleteForm').action = '/products/' + productId; // Update form action for the correct product
    }

    // Function to close the delete modal
    function closeDeleteModal() {
        document.getElementById('deleteProductModal').classList.add('hidden');
    }
</script>
@endsection

Step 6. Test Your Crud Application

Run this command

bash 
php artisan serve 

 Visit http://127.0.0.1:8000/products

Add Products

Edit Products

Delete Products

Congratulations!!!!!

You've successfully built a CRUD application using Laravel and Tailwind CSS!

In this lesson you are able to:

• Add new products with an image upload feature.

• Create pagination the product listing.

• Update and delete products.