Laravel 8 CRUD Tutorial Example Step By

Step From Scratch

By Krunal Last updated Feb 23, 2021
3
Share

Laravel is a PHP-based web framework that has already laid the foundation for web
developers to create a web application without worrying about small things. Laravel provides
MVC(model-view-controller) architecture through which you can quickly build CRUD
applications.

Every six months, the core developer team comes with a newer and improved version of
Laravel; it is a Laravel 8. This post will walk you through how to create a Laravel 8 crud
application fast. If you are a beginner in Laravel, this article will help you create, insert,
update, and delete the model from the Database.

Laravel 8 CRUD Tutorial

To create a CRUD application in Laravel 8, your machine should have PHP version >= 7.3
and composer with the additional following extensions.

1. BCMath PHP Extension

2. Ctype PHP Extension
3. OpenSSL PHP Extension
4. PDO PHP Extension
5. Tokenizer PHP Extension
6. XML PHP Extension
7. Fileinfo PHP Extension
8. JSON PHP Extension
9. Mbstring PHP Extension

Step 1: Installing Laravel 8

If you are using Laravel Valet, then you need to update your Valet in your system to create
the latest laravel project. You can find more on the Laravel Valet upgrade guide.

You can also install Laravel 8 using the following command.

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

I will use the Visual Studio Code as an editor for this project.

Step 2: Configure the MySQL Database

We will use a MySQL database to create a Database and come back to the project.
Laravel provides the .env file to add credentials. Open the file and edit the following code.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel8crud
DB_USERNAME=root
DB_PASSWORD=root

The username and password will be different for yours based on your database credentials.

Laravel comes with some default migrations like users, password_resets, and
create_failed_jobs table. Now go to the terminal and type the following command to run
your migrations.
php artisan migrate

You can see in your database that these tables are created, and those tables are empty.

Step 3: Create a model and custom migration

We will create a project around Playstation 5 games. So users can create PS5 games, edit and
delete the games. So, let’s create a Game model and migration.

php artisan make:model Game -m

It will create two files.

1. Game.php model
2. create_games_table migration

Add the new fields inside the create_games_table.php migration file.

// create_games_table.php

public function up()

{
Schema::create('games', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->integer('price');
$table->timestamps();
});
}

The id and timestamp fields are created by Laravel by default. The name and price are our
custom fields that the user can add via the webforms. You can run the migration to create the
table in the database.

php artisan migrate

Step 4: Create a Laravel 8 controller.

Laravel resource routing assigns the typical “CRUD” routes to a controller with a single line
of code. Since our application is basic crud operations, we will use the Resource Controller
for this small project.

php artisan make:controller GameController --resource

In a fresh install of Laravel 8, there is no namespace prefix being applied to your route groups
that your routes are loaded into.

In previous releases of Laravel, the RouteServiceProvider contained

a $namespace property. This property’s value would automatically be prefixed onto
controller route definitions and calls to the action helper / URL::action method. In Laravel
8.x, this property is null by default. This means that no automatic namespace prefixing will
be done by Laravel.” Laravel 8.x Docs – Release Notes

What here you can do is open the App\Providers\RouteServiceProvider.php file and

modify the following code inside the boot() method.

// RouterServiceProvider.php

Route::middleware('web')
->namespace('App\Http\Controllers')
->group(base_path('routes/web.php'));

That is it. Now it can find the controller. If your controller files are elsewhere, then you have
to assign the path in the namespace.

Note here that I have added the –resource flag, which will define six methods inside the
GameController, namely:

1. Index: (The index() method is used for displaying a list of games).

2. Create: (The create() method will show the form or view for creating a game).
3. Store: (The store() method is used for creating a game inside the database. Note:
create method submits the form data to store() method).
4. Show: (The show() method will display a specified game).
5. Edit: (The edit() method will show the form for editing a game. Form will be filled
with the existing game data).
6. Update: (The update() method is used for updating a game inside the database. Note:
edit() method submits the form data to update() method).
7. Destroy: (The destroy() method is used for deleting the specified game).

By default the GameController.php file is created inside the app >> Http >>

controllers folder.

<?php

// GameController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
class GameController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
}

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

/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}

/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}

/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}

/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}

/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}

You can see that the file contains CRUD operations in the form of different functions. We
will use these functions, one by one, to create crud operations.

The –resource flag will call the internal resource() method by Laravel to generate the
following routes. You can check out the route list using the following command.

php artisan route: list

Step 5: Define routes

To define a route in Laravel, you need to add the route code inside the routes >>
web.php file.

// web.php

Route::resource('games', 'GameController');

Step 6: Configure Bootstrap in Laravel 8

Laravel provides Bootstrap and Vue scaffolding that is located in the laravel/ui Composer
package, which may be installed using Composer.

composer require laravel/ui

Once the laravel/ui package has been installed, you may install the frontend scaffolding
using the ui Artisan command.

php artisan ui bootstrap

Now, please run “npm install && npm run dev” to compile your fresh scaffolding.

Step 7: Create Views in Laravel 8

Views contain the HTML served by your application and separate your controller/application
logic from your presentation logic. Views are stored in the resources/views directory.

Inside the views directory, we also need to create a layout file. So, we will create the file
inside the views directory called layout.blade.php. Add the following code in
the layout.blade.php file.

<!-- layout.blade.php -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel 8 CRUD Tutorial</title>
<link href="{{ asset('css/app.css') }}" rel="stylesheet"
type="text/css" />
</head>
<body>
<div class="container">
@yield('content')
</div>
<script src="{{ asset('js/app.js') }}" type="text/js"></script>
</body>
</html>

Inside the resources >> views folder, create the following three-blade files.

1. create.blade.php
2. edit.blade.php
3. index.blade.php

Inside the create.blade.php file, write the following code.

<!-- create.blade.php -->

@extends('layout')

@section('content')
<style>
.uper {
margin-top: 40px;
}
</style>
<div class="card uper">
<div class="card-header">
Add Games Data
</div>
<div class="card-body">
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div><br />
@endif
<form method="post" action="{{ route('games.store') }}">
<div class="form-group">
@csrf
<label for="country_name">Game Name:</label>
<input type="text" class="form-control" name="name"/>
</div>
<div class="form-group">
<label for="cases">Price :</label>
<input type="text" class="form-control" name="price"/>
</div>
<button type="submit" class="btn btn-primary">Add Game</button>
</form>
</div>
</div>
@endsection

In this code, we have defined the action which will call the store() method of the
GameController’s method. Remember, we have used the resource controller.

Now, we need to return this create view from the create() method of GameController. So
write the following code inside the GameController’s create() method.

// GameController.php

public function create()

{
return view('create');
}

Go to https://laravel8crud.test/games/create or http://localhost:8000, and you will see

something like below.

Step 8: Add Validation rules and store the data.

In this step, we will add a Laravel form Validation. Now, add the GameController.php is
that import the namespace of the Game model inside the GameController.php file.

<?php

// GameController.php
namespace App\Http\Controllers;

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

Now, write the following code inside the GameController.php file’s store() function.

// GameController.php

public function store(Request $request)

{
$validatedData = $request->validate([
'name' => 'required|max:255',
'price' => 'required',
]);
$show = Game::create($validatedData);

return redirect('/games')->with('success', 'Game is successfully

saved');
}

We use the $request->validate() method for validation, which receives an array of validation
rules. The

Validation rules[] is the associative array. The key will be the field_name and value being
the validation rules. The second parameter is an optional array for custom validation
messages. Rules are separated with a pipe sign “ | ”. In this example, we are using the most
basic validation rules.

If the validation fails, then it will redirect back to the form page with error messages. If the
validation passes then, it will create the new game and save the game in the database.

In case of errors, we need to loop through those error messages inside the
create.blade.php file, which we have already done it.

If you leave all the form fields empty, then you will find the error message like this image.

 
As we can see that we got the errors, but if we fill all the correct data, you will still not be
able to save the data into the database because of Mass Assignment Exception.

To prevent the Mass Assignment Exception, we need to add a $fillable array inside the
Game.php model.

<?php

// Game.php

namespace App\Models;

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

class Game extends Model

{
use HasFactory;

protected $fillable = ['name', 'price'];

}

Now, if you fill the correct form fields, then it creates a new row in the database.

Step 9: Display the games

To display the list of games, we need to write the HTML code inside
the index.blade.php file. But before that, let’s write the index() function of the
GameController.php file to get the array of data from the database.

// GameController.php

public function index()

{
$games = Game::all();

return view('index',compact('games'));
}

Now, write the following code inside the index.blade.php file.

<!-- index.blade.php -->

@extends('layout')

@section('content')
<style>
.uper {
margin-top: 40px;
}
</style>
<div class="uper">
@if(session()->get('success'))
<div class="alert alert-success">
{{ session()->get('success') }}
</div><br />
@endif
<table class="table table-striped">
<thead>
<tr>
<td>ID</td>
<td>Game Name</td>
<td>Game Price</td>
<td colspan="2">Action</td>
</tr>
</thead>
<tbody>
@foreach($games as $game)
<tr>
<td>{{$game->id}}</td>
<td>{{$game->name}}</td>
<td>{{$game->price}}</td>
<td><a href="{{ route('games.edit', $game->id)}}" class="btn
btn-primary">Edit</a></td>
<td>
<form action="{{ route('games.destroy', $game->id)}}"
method="post">
@csrf
@method('DELETE')
<button class="btn btn-danger"
type="submit">Delete</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
<div>
@endsection

We have added two buttons named edit and delete to perform the respective operations.

Step 10: Complete Edit and Update

To be able to edit the data, we need the data from the database. Add the following code inside
the GameController.php file’s edit function.

// GameController.php

public function edit($id)

{
$game = Game::findOrFail($id);

return view('edit', compact('game'));

}

Now, create the new file inside the views folder called edit.blade.php and add the following
code.

@extends('layout')

@section('content')
<style>
.uper {
margin-top: 40px;
}
</style>
<div class="card uper">
<div class="card-header">
Edit Game Data
</div>
<div class="card-body">
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div><br />
@endif
<form method="post" action="{{ route('games.update', $game->id ) }}">
<div class="form-group">
@csrf
@method('PATCH')
<label for="country_name">Game Name:</label>
<input type="text" class="form-control" name="name" value="{{
$game->name }}"/>
</div>
<div class="form-group">
<label for="cases">Game Price :</label>
<input type="text" class="form-control" name="price"
value="{{ $game->price }}"/>
</div>
<button type="submit" class="btn btn-primary">Update
Data</button>
</form>
</div>
</div>
@endsection

Now go to the index page and then go to the edit page of a specific game, and you will see
the form with filled values.

Now, add the following code inside the GameController’s update() function.

// GameController.php

public function update(Request $request, $id)

{
$validatedData = $request->validate([
'name' => 'required|max:255',
'price' => 'required'
]);
Game::whereId($id)->update($validatedData);

return redirect('/games')->with('success', 'Game Data is

successfully updated');
}

Now you can update all the data into the database.
Step 11: Create Delete Functionality
To remove data from the database, we will use GameController’s destroy() function.

// GameController.php

public function destroy($id)

{
$game = Game::findOrFail($id);
$game->delete();

return redirect('/games')->with('success', 'Game Data is

successfully deleted');
}

The delete() function is provided by Laravel to remove the data from the Database.

The complete controller file is this.

<?php

// GameController.php

namespace App\Http\Controllers;

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

class GameController extends Controller

{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$games = Game::all();

return view('index',compact('games'));
}

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

/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$validatedData = $request->validate([
'name' => 'required|max:255',
'price' => 'required',
]);
$show = Game::create($validatedData);

return redirect('/games')->with('success', 'Game is successfully

saved');
}

/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}

/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
$game = Game::findOrFail($id);

return view('edit', compact('game'));

}

/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
$validatedData = $request->validate([
'name' => 'required|max:255',
'price' => 'required'
]);
Game::whereId($id)->update($validatedData);

return redirect('/games')->with('success', 'Game Data is

successfully updated');
}

/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$game = Game::findOrFail($id);
$game->delete();

return redirect('/games')->with('success', 'Game Data is

successfully deleted');
}
}

That is it. Now, you can create, read, update, and delete the data in Laravel.

If you are interested in the FrontEnd Javascript framework like Vue with Laravel or Angular
with Laravel, check out the guides like Vue Laravel CRUD example and Angular Laravel
Tutorial Example.

I have put the whole crud operation code on Github so you can check it out as well.