Laravel 8 – CRUD application Tutorial

Posted on October 13, 2021

19 min read

22,365

Laravel is world famous php framework.it has various features.Laravel is a MVC architecture. In this tutorial will see how to make a crud application in Laravel 8.Laravel 8 – CRUD application tutorial with Example. Here is the Best Place to Learn Laravel 8 Articles.

Lets do the Crud Step by Step Laravel 8 From Scratch

First Step

In computer create the folder Laravel Projects.and open the folder. and type the address bar on cmd

and Press Enter key and Open the Command Prompt.

Install Laravel 8

Create a new Project type the command on the command prompt . I create the project name crudapplication
Laravel Tutorial Setup the Project

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

1	composer create-project --prefer-dist laravel/laravel crudapplication

After Type the Command you have to wait till the project has been created.

Database setup

Create the Database on xampp which name is crud

After created the database.

Change .env File

Change .env File for username, password and DB Name

Remove mb4 from Charset (config/database.php) // MySQL Version < 6

After that run check the application the welcome screen of Laravel framework look like this.

php artisan serve

1	php artisan serve

Create Migration

Create the tables

php artisan make:migration create_contacts_table

1	php artisan make:migration create_contacts_table

After that you can check the inside database folder migrations create_contacts_table.php

Click and open it.

class CreateContactsTable extends Migration
{
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

class CreateContactsTable extends Migration

{

public function up()

{

Schema::create('contacts', function (Blueprint $table) {

$table->id();

$table->timestamps();

});

}

public function down()

{

Schema::dropIfExists('contacts');

}

then create the following fields

$table->string(‘name’);

$table->string(‘address’);

$table->string(‘mobile’);

inside the function up() function i shown in below clearly.

class CreateContactsTable extends Migration
{ 
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
             $table->string('name'); 
             $table->string('address'); 
             $table->string('mobile');
        });
    }

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

class CreateContactsTable extends Migration

{

public function up()

{

Schema::create('contacts', function (Blueprint $table) {

$table->id();

$table->timestamps();

$table->string('name');

$table->string('address');

$table->string('mobile');

});

}

public function down()

{

Schema::dropIfExists('contacts');

}

After add the lines type

php artisan migrate

1	php artisan migrate

Create Controller

Create the controller name which is CrudController

php artisan make:controller ContactController --resource

1	php artisan make:controller ContactController --resource

Create Model

Model is used to get the data from the database.

Create the Model name which is Crud

php artisan make:model Contact

1	php artisan make:model Contact

After Model is Created the look like this. Code inside Model Class (app\Models\)

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Contact extends Model
{
    use HasFactory;
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model

{

use HasFactory;

}

Change it as like this

Add the Namespace above

namespace App\Models;

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

class Contact extends Model
{
    protected $table = 'contacts';
    protected $primaryKey = 'id';
    protected $fillable = ['name', 'address', 'mobile'];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Contact extends Model

{

protected $table = 'contacts';

protected $primaryKey = 'id';

protected $fillable = ['name', 'address', 'mobile'];

}

Create Views

Create a Folder inside the resources-views

inside the views folder create the contacts folder

In Laravel you have create the pages using pagename.blade.php

Create page layout.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Contact Laravel 8 CRUD</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
  
<div class="container">
    @yield('content')
</div>
   
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Contact Laravel 8 CRUD</title>

</head>

<body>

@yield('content')

</div>

</body>

</html>

Create page index.blade.php

@extends('contacts.layout')
@section('content')
    <div class="container">
        <div class="row">
 
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">Contacts</div>
                    <div class="card-body">
                        <a href="{{ url('/contact/create') }}" class="btn btn-success btn-sm" title="Add New Contact">
                            <i class="fa fa-plus" aria-hidden="true"></i> Add New
                        </a>
                        <br/>
                        <br/>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Name</th>
                                        <th>Address</th>
                                        <th>Telephone</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach($contacts as $item)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $item->name }}</td>
                                        <td>{{ $item->address }}</td>
                                        <td>{{ $item->mobile }}</td>
 
                                        <td>
                                            <a href="{{ url('/contact/' . $item->id) }}" title="View Student"><button class="btn btn-info btn-sm"><i class="fa fa-eye" aria-hidden="true"></i> View</button></a>
                                            <a href="{{ url('/contact/' . $item->id . '/edit') }}" title="Edit Student"><button class="btn btn-primary btn-sm"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</button></a>
 
                                            <form method="POST" action="{{ url('/contact' . '/' . $item->id) }}" accept-charset="UTF-8" style="display:inline">
                                                {{ method_field('DELETE') }}
                                                {{ csrf_field() }}
                                                <button type="submit" class="btn btn-danger btn-sm" title="Delete Contact" onclick="return confirm(&quot;Confirm delete?&quot;)"><i class="fa fa-trash-o" aria-hidden="true"></i> Delete</button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
 
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@extends('contacts.layout')

@section('content')

<div class="card-header">Contacts</div>

<i class="fa fa-plus" aria-hidden="true"></i> Add New

</a>

<br/>

<thead>

<tr>

<th>Address</th>

<th>Telephone</th>

<th>Actions</th>

</tr>

</thead>

<tbody>

@foreach($contacts as $item)

<tr>

<td>{{ $loop->iteration }}</td>

<td>{{ $item->address }}</td>

<td>{{ $item->mobile }}</td>

<td>

<a href="{{ url('/contact/' . $item->id) }}" title="View Student"><button class="btn btn-info btn-sm"><i class="fa fa-eye" aria-hidden="true"></i> View</button></a>

<a href="{{ url('/contact/' . $item->id . '/edit') }}" title="Edit Student"><button class="btn btn-primary btn-sm"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</button></a>

<form method="POST" action="{{ url('/contact' . '/' . $item->id) }}" accept-charset="UTF-8" style="display:inline">

<button type="submit" class="btn btn-danger btn-sm" title="Delete Contact" onclick="return confirm("Confirm delete?")"><i class="fa fa-trash-o" aria-hidden="true"></i> Delete</button>

</form>

</td>

</tr>

@endforeach

</tbody>

</table>

</div>

@endsection

Add Records

Create page Create.blade.php

@extends('contacts.layout')
@section('content')
 
<div class="card">
  <div class="card-header">Contactus Page</div>
  <div class="card-body">
      
      <form action="{{ url('contact') }}" method="post">
        {!! csrf_field() !!}
        <label>Name</label></br>
        <input type="text" name="name" id="name" class="form-control"></br>
        <label>Address</label></br>
        <input type="text" name="address" id="address" class="form-control"></br>
        <label>Mobile</label></br>
        <input type="text" name="mobile" id="mobile" class="form-control"></br>
        <input type="submit" value="Save" class="btn btn-success"></br>
    </form>
   
  </div>
</div>
 
@stop

@extends('contacts.layout')

@section('content')

<div class="card-header">Contactus Page</div>

{!! csrf_field() !!}

<label>Address</label></br>

<label>Mobile</label></br>

</form>

</div>

@stop

Edit Records

Create page edit.blade.php

@extends('contacts.layout')
@section('content')
 
<div class="card">
  <div class="card-header">Contactus Page</div>
  <div class="card-body">
      
      <form action="{{ url('contact/' .$contacts->id) }}" method="post">
        {!! csrf_field() !!}
        @method("PATCH")
        <input type="hidden" name="id" id="id" value="{{$contacts->id}}" id="id" />
        <label>Name</label></br>
        <input type="text" name="name" id="name" value="{{$contacts->name}}" class="form-control"></br>
        <label>Address</label></br>
        <input type="text" name="address" id="address" value="{{$contacts->address}}" class="form-control"></br>
        <label>Mobile</label></br>
        <input type="text" name="mobile" id="mobile" value="{{$contacts->mobile}}" class="form-control"></br>
        <input type="submit" value="Update" class="btn btn-success"></br>
    </form>
   
  </div>
</div>
 
@stop

@extends('contacts.layout')

@section('content')

<div class="card-header">Contactus Page</div>

<form action="{{ url('contact/' .$contacts->id) }}" method="post">

{!! csrf_field() !!}

@method("PATCH")

<input type="text" name="name" id="name" value="{{$contacts->name}}" class="form-control"></br>

<label>Address</label></br>

<input type="text" name="address" id="address" value="{{$contacts->address}}" class="form-control"></br>

<label>Mobile</label></br>

<input type="text" name="mobile" id="mobile" value="{{$contacts->mobile}}" class="form-control"></br>

</form>

</div>

@stop

Show Records

Create page show.blade.php

@extends('contacts.layout')
@section('content')
 
 
<div class="card">
  <div class="card-header">Contactus Page</div>
  <div class="card-body">
   
 
        <div class="card-body">
        <h5 class="card-title">Name : {{ $contacts->name }}</h5>
        <p class="card-text">Address : {{ $contacts->address }}</p>
        <p class="card-text">Phone : {{ $contacts->mobile }}</p>
  </div>
       
    </hr>
  
  </div>
</div>

@extends('contacts.layout')

@section('content')

<div class="card-header">Contactus Page</div>

<h5 class="card-title">Name : {{ $contacts->name }}</h5>

<p class="card-text">Address : {{ $contacts->address }}</p>

<p class="card-text">Phone : {{ $contacts->mobile }}</p>

</div>

</hr>

</div>

Controller

After that Pass All view pages through Controller. you have to add the Model namespace here

use App\Models\Contact; Data is coming from the database via Model.

<?php

namespace App\Http\Controllers;
use App\Models\Contact;
use Illuminate\Http\Request;

class ContactController extends Controller
{
  
    public function index()
    {
        $contacts = Contact::all();
      return view ('contacts.index')->with('contacts', $contacts);
    }

    
    public function create()
    {
        return view('contacts.create');
    }

   
    public function store(Request $request)
    {
        $input = $request->all();
        Contact::create($input);
        return redirect('contact')->with('flash_message', 'Contact Addedd!');  
    }

    
    public function show($id)
    {
        $contact = Contact::find($id);
        return view('contacts.show')->with('contacts', $contact);
    }

    
    public function edit($id)
    {
        $contact = Contact::find($id);
        return view('contacts.edit')->with('contacts', $contact);
    }

  
    public function update(Request $request, $id)
    {
        $contact = Contact::find($id);
        $input = $request->all();
        $contact->update($input);
        return redirect('contact')->with('flash_message', 'Contact Updated!');  
    }

   
    public function destroy($id)
    {
        Contact::destroy($id);
        return redirect('contact')->with('flash_message', 'Contact deleted!');  
    }
}

<?php

namespace App\Http\Controllers;

use App\Models\Contact;

use Illuminate\Http\Request;

class ContactController extends Controller

{

public function index()

{

$contacts = Contact::all();

return view ('contacts.index')->with('contacts', $contacts);

}

public function create()

{

return view('contacts.create');

}

public function store(Request $request)

{

$input = $request->all();

Contact::create($input);

return redirect('contact')->with('flash_message', 'Contact Addedd!');

}

public function show($id)

{

$contact = Contact::find($id);

return view('contacts.show')->with('contacts', $contact);

}

public function edit($id)

{

$contact = Contact::find($id);

return view('contacts.edit')->with('contacts', $contact);

}

public function update(Request $request, $id)

{

$contact = Contact::find($id);

$input = $request->all();

$contact->update($input);

return redirect('contact')->with('flash_message', 'Contact Updated!');

}

public function destroy($id)

{

Contact::destroy($id);

return redirect('contact')->with('flash_message', 'Contact deleted!');

}

Routes

Pages are Manage through routes. If you are crud system simple you can add it the routes one line look like this

Route::resource(‘/contact’, ContactController::class);

You have to add the ControllerNameSpace

use App\Http\Controllers\ContactController;

<?php

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


Route::get('/', function () {
    return view('welcome');
});

Route::resource('/contact', ContactController::class);

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\ContactController;

Route::get('/', function () {

return view('welcome');

});

Route::resource('/contact', ContactController::class);

Laravel 8 – CRUD application Tutorial

Lets do the Crud Step by Step Laravel 8 From Scratch

First Step

Install Laravel 8

Database setup

Change .env File

Remove mb4 from Charset (config/database.php) // MySQL Version < 6

Create Migration

Create the tables

Click and open it.

Create Controller

Create Model

Change it as like this

Create Views

Create page layout.blade.php

Create page index.blade.php

Add Records

Create page Create.blade.php

Edit Records

Create page edit.blade.php

Show Records

Create page show.blade.php

Controller

Routes

i have attached the video link below. which will do this tutorials step by step.

Basic Laravel 8 Project Step by Step

Laravel 8 Join Two Tables

CoffeeShop Inventory Management System using Laravel 8

Node js React Mongodb Search Functionality

Node js Angular Mongodb Search Functionality

How to Search Records Node js Express Mongodb

Laravel 10 – CRUD Application Tutorial

Laravel 8 Image Upload and Display

Basic Laravel 8 Project Step by Step

Leave a Reply Cancel reply

Check Also

Node js React Mongodb Search Functionality

Recent Posts

Ads Blocker Detected!!!