Laravel 10 CRUD Application Tutorial for Beginners

Last Updated: 06 Jan, 2024

In this comprehensive and simple tutorial you will be learning simplest way of creating new Laravel 10 CRUD application with beautiful examples. In Laravel, creating and performing CRUD (Create, Read, Update, Delete) operation is very easy and you can do it in a matter of minutes. CRUD functionality is very popular and often performed by alomost each and every web developer. CRUD consists of the following operations that we most frequently appliy on the database entities:

  • CREATE: This operation is used to create a fresh record in a database table.
  • READ: This operation is used to retrieve esixting records from a database table that can be filterd based on multiple WHERE conditions.
  • UPDATE: This operation is used to modify any record in a particular table if required.
  • DELETE: Using this operation, we can remove any unwanted and desired records from a database table.

You have to follow below mentioned steps to perfomr a CRUD operation in laravel 10 application:

Step 1: Firstly Create a New Laravel 10 Application

First of all, let's install laravel 10 on our system and do basic setup as per your need. Open terminal and execute the below given command:

composer create-project laravel/laravel l10crudapp

Step 2: Configure Database Credentials in .env file

Next, let's update database configuration variables in .env file as follows:

DB_DATABASE=l10crudapp
DB_USERNAME={yourdbusername}
DB_PASSWORD={yourdbpassword}

Step 3: Create Database Migration and Manufacturer Model

Next, let's create a migration file for manufacturers table using following command:

php artisan make:model Manufacturer -m

This command will generate two files:

  • A migration file something like database/migrations/*_create_manufacturers_table.php
  • A model file app/Models/Manufacturer.php

Open generated migration file and modify it as follows:

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    public function up(): void
    {
        Schema::create('manufacturers', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('phone');
            $table->string('email');
            $table->timestamps();
        });
    }

    public function down(): void
    {
        Schema::dropIfExists('manufacturers');
    }
};

Next, open generated model file and modify it as follows:

<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Manufacturer extends Model
{
    use HasFactory;
    protected $fillable = [
        'name', 'phone', 'email'
    ];
}

Next, you will have to run the following command to invoke laravel migration which will create manufacturers table in your database:

php artisan migrate

Step 4: Create Manufacturer Controller

Next, let's create a manufacturer resource controller called ManufacturerController by running following command to in your terminal:

php artisan make:controller ManufacturerController --resource

Above command will generate following controller file:

  • Controller file: app/Http/Controllers/ManufacturerController.php

Let's open this controller file and modify it as follows:

<?php
namespace App\Http\Controllers;

use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use App\Models\Manufacturer;

class ManufacturerController extends Controller
{
    const MFLABELS = array(
        'listmf' => 'List of Existing Manufacturers',
        'createmf' => 'Create New Manufacturer',
        'editmf' => 'Edit Manufacturer',
        'viewmf' => 'Manufacturer Details',
        'editmfshort' => 'Edit MF',
        'deletemfshort' => 'Delete MF',
        'viewmfshort' => 'View MF',
    );

    public $view_data = array();

    public function __construct()
    {
        $this->view_data['mflabels'] = self::MFLABELS;
    }

    public function index()
    {
        $manufacturers = Manufacturer::orderBy('created_at', 'desc')->paginate(10);
        $this->view_data['manufacturers'] = $manufacturers;
        return view('manufacturers.list')->with($this->view_data);
    }

    public function create()
    {
        return view('manufacturers.create')->with($this->view_data);
    }

    public function store(Request $request): RedirectResponse
    {
        $request->validate([
            'name' => 'required',
            'phone' => 'required',
            'email' => 'required',
        ]);
        $request_data = $request->all();
        Manufacturer::create([
            'name' => $request_data['name'],
            'phone' => $request_data['phone'],
            'email' => $request_data['email']
        ]);
        return redirect()->route('manufacturers.index')->with('success', 'Manufacturer created successfully.');
    }

    public function show(Manufacturer $manufacturer)
    {
        $this->view_data['manufacturer'] = $manufacturer;
        return view('manufacturers.show')->with($this->view_data);
    }

    public function edit(Manufacturer $manufacturer)
    {
        $this->view_data['manufacturer'] = $manufacturer;
        return view('manufacturers.edit')->with($this->view_data);
    }

    public function update(Request $request, Manufacturer $manufacturer): RedirectResponse
    {
        $request->validate([
            'name' => 'required',
            'phone' => 'required',
            'email' => 'required',
        ]);
        $manufacturer->update($request->all());
        return redirect()->route('manufacturers.index')->with('success','Manufacturer updated successfully');
    }

    public function destroy(Manufacturer $manufacturer): RedirectResponse
    {
        $manufacturer->delete();
        return redirect()->route('manufacturers.index')->with('success', 'Manufacturer deleted successfully');
    }
}

Step 5: Create Manufacturer Resource Route

Next, let's create a manufacturer resource route to perform CRUD operations on manufacturers table. Open your routes/web.php file and update the following code in it:

<?php
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});
Route::group(['namespace' => 'App\Http\Controllers', 'middleware' => ['web']], function () {
    Route::resource('/manufacturers', ManufacturerController::class);
});

Step 6: Create Blade Files for Manufacturers

In this step, let's create all the necessary blade files in a seperate folder. We will creating following files inside resources/views/manufacturers directory:

  • master.blade.php
  • list.blade.php
  • create.blade.php
  • edit.blade.php
  • show.blade.php

resources/views/manufacturers/master.blade.php

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Laravel 10 CRUD Application Tutorial</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<style type="text/css">
		.container{padding: 50px 220px;}@media only screen and (max-width: 767px){.container{padding: 15px;}}
	</style>
</head>
<body>
	<div class="container bg-secondary">
		@yield('content')
	</div>
</body>
</html>

resources/views/manufacturers/list.blade.php

@extends('manufacturers.master')
@section('content')
<div class="row">
	<div class="col-12 col-md-8 text-dark"><h3>{{$mflabels['listmf']}}</h3></div>
	<div class="col-12 col-md-4 text-end">
		<a class="btn btn-info" href="{{route('manufacturers.create')}}">{{$mflabels['createmf']}}</a>
	</div>
</div>
<div class="row">
	@if(Session::get('error'))
	<div class="col-12">
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
		  <strong class="text-center">{{Session::get('error')}}!</strong>
		  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
		</div>
	</div>
	@endif
	<div class="col-12">
		<table class="table table-primary">
		  <thead>
		    <tr>
		      <th scope="col">S.N.</th>
		      <th scope="col">Name</th>
		      <th scope="col">Phone</th>
		      <th scope="col">Email</th>
		      <th scope="col">Actions</th>
		    </tr>
		  	</thead>
		  	<tbody>
	  		@if($manufacturers->count() > 0)
			  	@foreach($manufacturers as $manufacturer)
			    <tr>
			      <td>{{$loop->index + 1}}</td>
			      <td>{{$manufacturer->name}}</td>
			      <td>{{$manufacturer->phone}}</td>
			      <td>{{$manufacturer->email}}</td>
			      <td>
  	                <form action="{{ route('manufacturers.destroy', $manufacturer->id) }}" method="POST">
  	                	@csrf
                    	<a class="btn btn-primary" href="{{ route('manufacturers.edit', $manufacturer->id) }}">{{$mflabels['editmfshort']}}</a>
                    	<a class="btn btn-info" href="{{ route('manufacturers.show', $manufacturer->id) }}">{{$mflabels['viewmfshort']}}</a>
	                    @method('DELETE')
	                    <button type="submit" class="btn btn-danger">{{$mflabels['deletemfshort']}}</button>
                	</form>
			      </td>
			    </tr>
			    @endforeach
		    @else
		    <tr><td colspan="5">Manufacturer not found!</td></tr>
		    @endif
		  	</tbody>
		</table>
		{!! $manufacturers->links() !!}
	</div>
</div>
@endsection

resources/views/manufacturers/create.blade.php

@extends('manufacturers.master')
@section('content')
<div class="row">
	<div class="col-12 col-md-8 text-dark"><h3>{{$mflabels['createmf']}}</h3></div>
	<div class="col-12 col-md-4 text-end">
		<a class="btn btn-info" href="{{route('manufacturers.index')}}">{{$mflabels['listmf']}}</a>
	</div>
</div>
<div class="row">
	@if($errors->any())
	<div class="col-12">
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
		  <strong class="text-center">Some error occured!</strong>
		  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
		  <ul>
		  	@foreach($errors->all() as $error)
		  	<li>{{$error}}</li>
		  	@endforeach
		  </ul>
		</div>
	</div>
	@endif
	<div class="col-12">
		<form method="POST" action="{{route('manufacturers.store')}}">
			@csrf
			<div class="mb-3">
			    <label for="name" class="form-label">Full Name</label>
			    <input type="text" class="form-control" id="name" name="name" placeholder="Enter full name">
		  	</div>
		  	<div class="mb-3">
			    <label for="phone" class="form-label">Phone Number</label>
			    <input type="text" class="form-control" id="phone" name="phone" placeholder="Enter phone">
		  	</div>
		  	<div class="mb-3">
			    <label for="email" class="form-label">Email Address</label>
			    <input type="email" class="form-control" id="email" name="email" placeholder="Enter email address">
		  	</div>
		  	<button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>
</div>
@endsection

resources/views/manufacturers/edit.blade.php

@extends('manufacturers.master')
@section('content')
<div class="row">
	<div class="col-12 col-md-8 text-dark"><h3>{{$mflabels['editmf']}}</h3></div>
	<div class="col-12 col-md-4 text-end">
		<a class="btn btn-info" href="{{route('manufacturers.index')}}">{{$mflabels['listmf']}}</a>
	</div>
</div>
<div class="row">
	@if($errors->any())
	<div class="col-12">
		<div class="alert alert-danger alert-dismissible fade show" role="alert">
		  <strong>Some error occured!</strong>
		  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
		  <ul>
		  	@foreach($errors->all() as $error)
		  	<li>{{$error}}</li>
		  	@endforeach
		  </ul>
		</div>
	</div>
	@endif
	<div class="col-12">
		<form method="POST" action="{{route('manufacturers.update', $manufacturer->id)}}">
			@csrf
			@method('PUT')
			<div class="mb-3">
			    <label for="name" class="form-label">Name</label>
			    <input type="text" class="form-control" id="name" name="name" value="{{$manufacturer->name}}" placeholder="Enter name">
		  	</div>
		  	<div class="mb-3">
			    <label for="phone" class="form-label">Phone Number</label>
			    <input type="text" class="form-control" id="phone" name="phone" value="{{$manufacturer->phone}}" placeholder="Enter phone">
		  	</div>
		  	<div class="mb-3">
			    <label for="email" class="form-label">Email</label>
			    <input type="email" class="form-control" id="email" name="email" value="{{$manufacturer->email}}" placeholder="Enter email">
		  	</div>
		  	<button type="submit" class="btn btn-primary">Submit</button>
		</form>
	</div>
</div>
@endsection

resources/views/manufacturers/show.blade.php

@extends('manufacturers.master')
@section('content')
<div class="row">
	<div class="col-12 col-md-8 text-dark"><h3>{{$mflabels['viewmf']}}</h3></div>
	<div class="col-12 col-md-4 text-end">
		<a class="btn btn-info" href="{{route('manufacturers.index')}}">{{$mflabels['listmf']}}</a>
	</div>
</div>
<div class="row">
	<div class="col-12 mb-3">
		<strong class="text-white">Manufacturer Name: {!! $manufacturer->name !!}</strong>
	</div>
	<div class="col-12 mb-3">
		<strong class="text-white">Manufacturer Phone: {!! $manufacturer->phone !!}</strong>
	</div>
	<div class="col-12 mb-3">
		<strong class="text-white">Manufacturer Email: {!! $manufacturer->email !!}</strong>
	</div>
</div>
@endsection

Step 7: Start Development Server

Done, now you have to start the laravel development server using following command:

php artisan serve

Step 7: Test Your Application in browser

Finally, test your application by visiting following URL in your browser:

http://localhost:8080/manufacturers

Laravel 10 CRUD Application Tutorial for Beginners

 

Thank You, Please Share.

Recommended Posts

Simplified Laravel 9 AJAX Based CRUD Tutorial for Beginners

Simplified Laravel 9 AJAX Based CRUD Tutorial for Beginners

In this simplified and easy tutorial you will learn how to create a AJAX Based CRUD application in Laravel 9 with the help of proper working examples.

Simplified Laravel 9 Cashfree Integration Tutorial for Beginners

Simplified Laravel 9 Cashfree Integration Tutorial for Beginners

In this awesome tutorial, we are going to learn the simplest way of integrating Cashfree Payment Gateway inside Laravel 9 application.

IMAGE

How to Install and Configure Vue 3 Application in Laravel 10

This tutorial will show you How To Install and Configure a basic Vue 3 Application in Laravel 10 using Vite 3.