Laravel 8 CRUD Tutorial Example Step By Step From Scratch

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.

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.

BCMath PHP Extension
Ctype PHP Extension
OpenSSL PHP Extension
PDO PHP Extension
Tokenizer PHP Extension
XML PHP Extension
Fileinfo PHP Extension
JSON PHP Extension
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.

Game.php model
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:

Index: (The index() method is used for displaying a list of games).
Create: (The create() method will show the form or view for creating a game).
Store: (The store() method is used for creating a game inside the database. Note: create method submits the form data to store() method).
Show: (The show() method will display a specified game).
Edit: (The edit() method will show the form for editing a game. Form will be filled with the existing game data).
Update: (The update() method is used for updating a game inside the database. Note: edit() method submits the form data to update() method).
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.

create.blade.php
edit.blade.php
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');
    }
}

Souy Soeng

Laravel 8 CRUD Tutorial Example Step By Step From Scratch

Laravel 8 CRUD Tutorial

Laravel 8 CRUD Tutorial

Step 1: Installing Laravel 8

Step 2: Configure the MySQL Database

Step 3: Create a model and custom migration

Step 4: Create a Laravel 8 controller.

Step 5: Define routes

Step 6: Configure Bootstrap in Laravel 8

Step 7: Create Views in Laravel 8

Step 8: Add Validation rules and store the data.

Step 9: Display the games

Step 10: Complete Edit and Update

Step 11: Create Delete Functionality

Posted by Soeng Souy

Post a Comment

0 Comments

My Channel

Facebook Page

Followers

Category

Popular Posts

HR System Management Admin Dashboard | Clone Full Code Laravel 8

School Management Dashboard in Laravel 9

Simple and Advanced Search in Laravel 8

Contact Us

Footer Menu Widget

Souy Soeng

Laravel 8 CRUD Tutorial Example Step By Step From Scratch

Laravel 8 CRUD Tutorial

Laravel 8 CRUD Tutorial

Step 1: Installing Laravel 8

Step 2: Configure the MySQL Database

Step 3: Create a model and custom migration

Step 4: Create a Laravel 8 controller.

Step 5: Define routes

Step 6: Configure Bootstrap in Laravel 8

Step 7: Create Views in Laravel 8

Step 8: Add Validation rules and store the data.

Step 9: Display the games

Step 10: Complete Edit and Update

Step 11: Create Delete Functionality

Posted by Soeng Souy

You may like these posts

Post a Comment

0 Comments

My Channel

Facebook Page

Followers

Category

Popular Posts

HR System Management Admin Dashboard | Clone Full Code Laravel 8

School Management Dashboard in Laravel ​9

Simple and Advanced Search in Laravel​ 8

Contact Us

Footer Menu Widget

School Management Dashboard in Laravel 9

Simple and Advanced Search in Laravel 8