Building a Laravel 10 CRUD Application with Bootstrap: A Step-by-Step Guide

Introduction:- Laravel is a popular PHP framework that simplifies web application development, and Bootstrap is a widely used front-end framework for creating responsive and visually appealing user interfaces. In this tutorial, we'll explore how to combine the power of Laravel 10 and Bootstrap to build a CRUD (Create, Read, Update, Delete) application. By the end of this guide, you'll have a solid foundation for developing dynamic web applications with Laravel and Bootstrap.

In this blog, I will explain to you a Laravel 10 CRUD application example. We will create a Laravel 10 CRUD application for beginners. I will give you a very simple example of how to create CRUD in Laravel 10. At the end of this blog you will learn a CRUD application in Laravel 10.

So, let's follow a few steps to create an example of Laravel 10 CRUD application tutorial.

Prerequisites: Before getting started, make sure you have the following requirements in place:

1. PHP installed on your machine (preferably version 8.1 or above)
2. Composer installed
3. A web server (such as Apache or Nginx)
4. Basic knowledge of PHP and Laravel concepts
5. Familiarity with HTML, CSS, and Bootstrap

Step 1: Set Up a New Laravel Project To create a new Laravel project, open your terminal and execute the following command:

 composer create-project --prefer-dist laravel/laravel product 

This command will create a new Laravel project named "product" in a directory called "product."

Step 2: Configure the Database Next, you need to set up the database connection. Open the .env file in the project root directory and update the following lines with your database details:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_database_name
DB_USERNAME=your_username
DB_PASSWORD=your_password

Step 3: Create a Database Table and Model

In this step, we'll create a database table and a corresponding Eloquent model. Run the following command to generate a migration and model for our application:

php artisan make:model Product -m

This command will generate a new migration file and a model named "Product." Open the migration file located in the database/migrations directory and define the table schema by adding fields like name, price, and quantity. Save the changes and run the migration using the command:

php artisan migrate

Step 4: Generate a Controller and Routes To handle the CRUD operations, we'll generate a controller and define routes for our application. Execute the following command to create a controller named "ProductController":

php artisan make:controller ProductController --resource

This command will generate a controller file with pre-defined CRUD methods. Open the generated controller file located in the app/Http/Controllers directory.

Step 5: Implement the Views Now let's create the views using Bootstrap for the user interface. Inside the resources/views directory, create a new folder called "products." Within this folder, create the following Blade view files:

• index.blade.php: Display a list of all product

@extends('layout')

@section('content')
	<h1>Product List</h1>
	<a href="{{ route('products.create') }}" class="btn btn-primary mb-3">Add Product</a>
	<table class="table">
    	<thead>
        	<tr>
            	<th>ID</th>
            	<th>Name</th>
            	<th>Price</th>
            	<th>Quantity</th>
            	<th>Action</th>
        	</tr>
    	</thead>
    	<tbody>
        	@foreach($products as $product)
            	<tr>
                	<td>{{ $product->id }}</td>
                	<td>{{ $product->name }}</td>
                	<td>{{ $product->price }}</td>
                	<td>{{ $product->quantity }}</td>
                	<td>
                    	<a href="{{ route('products.edit', $product->id) }}" class="btn btn-sm btn-primary">Edit</a>
                    	<form action="{{ route('products.destroy', $product->id) }}" method="POST" style="display: inline;">
                        	@csrf
                        	@method('DELETE')
                        	<button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this product?')">Delete</button>
                    	</form>
                	</td>
            	</tr>
        	@endforeach
    	</tbody>
	</table>
@endsection

• create.blade.php: Form to create a new poduct

@extends('layout')

@section('content')
	<h1>Add Product</h1>
	<form action="{{ route('products.store') }}" method="POST">
    	@csrf
    	<div class="form-group">
        	<label for="name">Name:</label>
        	<input type="text" class="form-control" id="name" name="name" required>
    	</div>
    	<div class="form-group">
        	<label for="price">Price:</label>
        	<input type="number" class="form-control" id="price" name="price" required>
    	</div>
    	<div class="form-group">
        	<label for="quantity">Quantity:</label>
        	<input type="number" class="form-control" id="quantity" name="quantity" required>
    	</div>
    	<button type="submit" class="btn btn-primary">Add</button>
	</form>
@endsection

• edit.blade.php: Form to edit an existing product

	@extends('layout')

	@section('content')
    	<h1>Edit Product</h1>
    	<form action="{{ route('products.update', $product->id) }}" method="POST">
        	@csrf
        	@method('PUT')
        	<div class="form-group">
            	<label for="name">Name:</label>
            	<input type="text" class="form-control" id="name" name="name" value="{{ $product->name }}" required>
        	</div>
        	<div class="form-group">
            	<label for="price">Price:</label>
            	<input type="number" class="form-control" id="price" name="price" value="{{ $product->price }}" required>
        	</div>
        	<div class="form-group">
            	<label for="quantity">Quantity:</label>
            	<input type="number" class="form-control" id="quantity" name="quantity" value="{{ $product->quantity }}" required>
        	</div>
        	<button type="submit" class="btn btn-primary">Update</button>
    	</form>
	@endsection

• show.blade.php: Display details of a specific product

	@extends('layout')

	@section('content')
    	<h1>Product Details</h1>
    	<div class="card">
        	<div class="card-body">
            	<h5 class="card-title">{{ $product->name }}</h5>
            	<p class="card-text">Price: {{ $product->price }}</p>
            	<p class="card-text">Quantity: {{ $product->quantity }}</p>
            	<a href="{{ route('products.edit', $product->id) }}" class="btn btn-primary">Edit</a>
        	</div>
    	</div>
	@endsection

In each view file, utilize Bootstrap classes and components to design the UI as desired. For example, you can use Bootstrap's form classes for input fields and buttons for a clean and responsive design.

Step 6: Define Routes Open the routes/web.php file and define the routes for the CRUD operations using the resourceful routing feature in Laravel. Add the following code to the file:

use App\Http\Controllers\ProductController;

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

Step 7: Test the Application Congratulations! You have successfully built the Laravel 10 CRUD application with Bootstrap. Start the development server by executing the following command:

php artisan serve

Visit http://localhost:8000/products in your browser to see the list of posts. You can now create, update, and delete product using the Bootstrap-styled forms.

Conclusion: In this tutorial, we explored the process of building a Laravel 10 CRUD application using the Bootstrap framework for the user interface. By leveraging Laravel's powerful features and Bootstrap's responsive design capabilities, you can create dynamic and visually appealing web applications. Feel free to customize the application further by adding validation, authentication, and additional features to meet your specific requirements. Happy coding!