Laravel 10 CRUD Operations Example Tutorial for Beginners

2 Comments on Laravel 10 CRUD Operations Example Tutorial for Beginners

If you are looking to create a simple CRUD (Create, Read, Update, Delete) application in Laravel, then this tutorial is designed for you. In this step-by-step guide, you will learn how to implement a CRUD functionality in your Laravel 10 web application.

The tutorial will cover the following key aspects:

  1. Setting up Laravel: You will learn how to install Laravel on your development environment and configure the necessary database connections.
  2. Database Migration: You will create a migration file to define the structure of your database table.
  3. Model Creation: You will generate a model class to interact with the corresponding database table.
  4. Routing: You will define the necessary routes in your application to handle CRUD operations.
  5. Controller Creation: You will create a controller to handle the logic for creating, reading, updating, and deleting records.
  6. Views: You will design the user interface by creating the necessary views to display the data and forms for creating and updating records.
  7. Form Handling: You will learn how to handle form submissions and perform the appropriate CRUD operations.
  8. Validation: You will implement validation rules to ensure data integrity and handle error messages.

Laravel 10 CRUD Operations Example Tutorial for Beginners

By using the following steps, you can learn how to create crud operation app in laravel 10:

  • Step 1 – Setup New Laravel 10 App
  • Step 2 – Setup Database with App
  • Step 3 – Create Model & Migration
  • Step 4 – Add Routes
  • Step 5 – Create CRUD Operation Controller
  • Step 6 – Create Blade Views File
    • Make Directory Name Companies
    • index.blade.php
    • create.blade.php
    • edit.blade.php
  • Step 7 – Run Laravel CRUD App on Development Server

Step 1 – Setup New Laravel 10 App

First of all, start your terminal to download or install Laravel 10 new setup. Execute the following command into it to install new Laravel 10 app into your system:

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

Step 2 – Setup Database with App

Once you have installed laravel app on your server, now you need to configure your database with your apps.

So, visit your app root directory and find .env file. Then configure database details as follows:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

Step 3 – Create Model & Migration

Open again your command prompt. And run the following command on it. To create model and migration file for form:

php artisan make:model Company -m

After that, open create_companies_table.php file inside LaravelCRUD/database/migrations/ directory. And the update the function up() with following code:

    public function up()
    {
        Schema::create('companies', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email');
            $table->string('address');
            $table->timestamps();
        });
    }

Then, open again command prompt and run the following command to create tables into database:

php artisan migrate
Recommended:-Laravel Clear Route, Config, View Cache using Artisan & Command Line

Step 4 – Add Routes

Then create routes for laravel crud app. So, open web.php file from the routes directory of laravel CRUD app. And update the following routes into the web.php file:

use App\Http\Controllers\CompanyCRUDController;

Route::resource('companies', CompanyCRUDController::class);

Step 5 – Create CRUD Operation Controller

Create a controller by using the following command on the command prompt to create a controller file:

php artisan make:controller CompanyCRUDController

After that, visit at app/Http/controllers and open CompanyCRUDController.php file. And update the following code into it:

<?php

namespace App\Http\Controllers;

use App\Models\Company;
use Illuminate\Http\Request;

class CompanyCRUDController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $data['companies'] = Company::orderBy('id','desc')->paginate(5);

        return view('companies.index', $data);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('companies.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'email' => 'required',
            'address' => 'required'
        ]);

        $company = new Company;

        $company->name = $request->name;
        $company->email = $request->email;
        $company->address = $request->address;


        $company->save();


        return redirect()->route('companies.index')
                        ->with('success','Company has been created successfully.');
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\company  $company
     * @return \Illuminate\Http\Response
     */
    public function show(Company $company)
    {
        return view('companies.show',compact('company'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Company  $company
     * @return \Illuminate\Http\Response
     */
    public function edit(Company $company)
    {
        return view('companies.edit',compact('company'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\company  $company
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $request->validate([
            'name' => 'required',
            'email' => 'required',
            'address' => 'required',
        ]);

        $company = Company::find($id);

        $company->name = $request->name;
        $company->email = $request->email;
        $company->address = $request->address;

        $company->save();

        return redirect()->route('companies.index')
                        ->with('success','Company Has Been updated successfully');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Company  $company
     * @return \Illuminate\Http\Response
     */
    public function destroy(Company $company)
    {
        $company->delete();

        return redirect()->route('companies.index')
                        ->with('success','Company has been deleted successfully');
    }
}
Recommended:-Laravel 10 Joins Example Tutorial

Step 6 – Create Blade Views File

Create the directory and some blade view, see the following:

  • Make Directory Name Companies
  • index.blade.php
  • create.blade.php
  • edit.blade.php

Create directory name companies inside resources/views directory.

Note that, create index.blade.php, create.blade.php and edit.blade inside companies directory. And update the following code into following files:

index.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Laravel 10 CRUD Tutorial From Scratch</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
</head>
<body>

<div class="container mt-2">

<div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Laravel 10 CRUD Example Tutorial</h2>
            </div>
            <div class="pull-right mb-2">
                <a class="btn btn-success" href="{{ route('companies.create') }}"> Create Company</a>
            </div>
        </div>
    </div>

    @if ($message = Session::get('success'))
        <div class="alert alert-success">
            <p>{{ $message }}</p>
        </div>
    @endif

    <table class="table table-bordered">
        <tr>
            <th>S.No</th>
            <th>Company Name</th>
            <th>Company Email</th>
            <th>Company Address</th>
            <th width="280px">Action</th>
        </tr>
        @foreach ($companies as $company)
        <tr>
            <td>{{ $company->id }}</td>
            <td>{{ $company->name }}</td>
            <td>{{ $company->email }}</td>
            <td>{{ $company->address }}</td>
            <td>
                <form action="{{ route('companies.destroy',$company->id) }}" method="Post">

                    <a class="btn btn-primary" href="{{ route('companies.edit',$company->id) }}">Edit</a>

                    @csrf
                    @method('DELETE')

                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
        @endforeach
    </table>

    {!! $companies->links() !!}

</body>
</html>

create.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Company Form - Laravel 10 CRUD</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
</head>
<body>

<div class="container mt-2">

<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left mb-2">
            <h2>Add Company</h2>
        </div>
        <div class="pull-right">
            <a class="btn btn-primary" href="{{ route('companies.index') }}"> Back</a>
        </div>
    </div>
</div>

  @if(session('status'))
    <div class="alert alert-success mb-1 mt-1">
        {{ session('status') }}
    </div>
  @endif

<form action="{{ route('companies.store') }}" method="POST" enctype="multipart/form-data">
    @csrf

     <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Company Name:</strong>
                <input type="text" name="name" class="form-control" placeholder="Company Name">
               @error('name')
                  <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
               @enderror
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Company Email:</strong>
                 <input type="email" name="email" class="form-control" placeholder="Company Email">
                @error('email')
                  <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
               @enderror
            </div>
        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Company Address:</strong>
                 <input type="text" name="address" class="form-control" placeholder="Company Address">
                @error('address')
                  <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
               @enderror
            </div>
        </div>
        <button type="submit" class="btn btn-primary ml-3">Submit</button>
    </div>

</form>

</body>
</html>

edit.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Edit Company Form - Laravel 10 CRUD Tutorial</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
</head>
<body>

<div class="container mt-2">

    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Edit Company</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('companies.index') }}" enctype="multipart/form-data"> Back</a>
            </div>
        </div>
    </div>

  @if(session('status'))
    <div class="alert alert-success mb-1 mt-1">
        {{ session('status') }}
    </div>
  @endif

    <form action="{{ route('companies.update',$company->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

         <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Company Name:</strong>
                    <input type="text" name="name" value="{{ $company->name }}" class="form-control" placeholder="Company name">
                    @error('name')
                     <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Company Email:</strong>
                     <input type="email" name="email" class="form-control" placeholder="Company Email" value="{{ $company->email }}">
                    @error('email')
                      <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                   @enderror
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Company Address:</strong>
                    <input type="text" name="address" value="{{ $company->address }}" class="form-control" placeholder="Company Address">
                    @error('address')
                     <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                    @enderror
                </div>
            </div>
              <button type="submit" class="btn btn-primary ml-3">Submit</button>

        </div>

    </form>
</div>

</body>
</html>

If you submit the add or edit form blank. So the error message will be displayed with the help of the code given below:

  @error('name')
  <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
  @enderror

Step 7 – Run Development Server

Last step, open command prompt and run the following command to start developement server:

php artisan serve

Then open your browser and hit the following url on it:

http://127.0.0.1:8000/companies

The Laravel 10 company crud app will looks like following images:

Recommended Laravel Posts

Recommended:- Laravel 10 Multi Auth (Authentication) Tutorial
Recommended:- Laravel 10 Stripe Payment Gateway Integration Tutorial
Recommended:- Instamojo Payment Gateway Integration In Laravel 10
Recommended:- Laravel 10 Drag and Drop File Upload using Dropzone Tutorial
Recommended:- How to Install Ckeditor in Laravel 10
Recommended:- Laravel 10 Highcharts Example Tutorial
Recommended:- Laravel 10 JWT Rest API Authentication Example Tutorial
Recommended:- Laravel 10 JWT Rest API Authentication Example Tutorial
Recommended:- Laravel 10 Login with Linkedin Example Tutorial
Recommended:- Laravel 10 Livewire CRUD with Jetstream Tutorial
Recommended:- Laravel 10 Cron Job Task Scheduling Tutorial
Recommended:-Laravel 10 Backup Store On Google Drive Tutorial
Recommended:-Laravel 10 Rest API CRUD with Passport Auth Tutorial
Recommended:-Laravel 10 DataTable CRUD Tutorial
Recommended:-Laravel 10 Ajax CRUD Using Datatable Tutorial
Recommended:-Laravel 10 Send Emails using Office365 Example
Recommended:-Laravel 10 Ajax CRUD with Image Upload Tutorial
Recommended:-Laravel 10 Push Notification to Android and IOS Tutorial
Recommended:-Laravel 10 Send Email with PDF Attachment Tutorial
Recommended:-Laravel 10 Livewire Dependent Dropdown Tutorial
Filed Under: Laravel Tagged With: , , , , ,

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

2 replies to Laravel 10 CRUD Operations Example Tutorial for Beginners

  1. very nice explained

    Reply

    • nicee, thank you

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *