Create PHP Laravel 8 CRUD Web App with MySQL Database

In this tutorial you will learn about the Create PHP Laravel 8 CRUD Web App with MySQL Database and its application with practical example.

In this Create PHP Laravel 8 CRUD Web App with MySQL Database Tutorial I’ll show you how to create a laravel 8 simple crud application with mysql database in laravel 8. In this tutorial you will learn to create simple laravel 8 crud application example with mysql database. In this article, you will learn how to create fully functional CRUD (Create, Read, Update and Delete) Application In laravel. We will be creating a student crud operation application in laravel 8.

Table Of Contents−

Create PHP Laravel 8 CRUD Web App with MySQL Database

In this step by step guide, we will be creating a simple laravel 8 CRUD application to demonstrate you how to create laravel CRUD operation based application in laravel 8. Please follow the instruction given below:

Creating a Laravel 8|7 Project
Set Up MySQL Database in Laravel

Setting Up Migration and Model
Adding Controller and Creating Routes
Create Views in Laravel with Blade Templates

Create, Store & Validate User Data in MySQL Database
Show Users Data
Edit and Update Data

Creating a Laravel Project

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

composer create-project laravel/laravel --prefer-dist laravel-crud-app

1	composer create-project laravel/laravel --prefer-dist laravel-crud-app

Get inside the project:

cd laravel-crud-app

1	cd laravel-crud-app

Set Up MySQL Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laravel_db

DB_USERNAME=root

DB_PASSWORD=root

Setting Up Migration and Model

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Student -m

1	php artisan make:model Student -m

Once above command is executed there will be a migration file created inside database/migrations/ directory, just open migration file and update the function up() method as following:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateStudentsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('students', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->string('phone');
            $table->string('password');            
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('students');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreateStudentsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

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

$table->bigIncrements('id');

$table->string('name');

$table->string('email');

$table->string('phone');

$table->string('password');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('students');

}

Next, go to app/Models/Student.php file and add the $fillable property in the Student model as following.

<?php

namespace App\Models;

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

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

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Student extends Model

{

use HasFactory;

protected $fillable = ['name', 'email', 'phone', 'password'];

}

Now, run the migration to create database table using following artisan command:

php artisan migrate

1	php artisan migrate

Creating Controller and Routes

Now, lets create a resource controller named StudentController using command given below –

php artisan make:controller StudentController --resource

1	php artisan make:controller StudentController --resource

Once the above command executed, it will create a controller file StudentController.php in app/Http/Controllers/ directory. By default, there are seven methods defined in it as following:

index() => shows student list
create() => creates a student using a form
store() => creates a student in the database
show() => shows a specific student
edit() => updates the student data using a form
update() => updates the student data using a form
destroy() => removes a particular student

Open the StudentController.php file and put the following code in it.

<?php

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


class StudentController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $student = Student::all();
        return view('index', compact('student'));
    }

    /**
     * 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)
    {
        $storeData = $request->validate([
            'name' => 'required|max:255',
            'email' => 'required|max:255',
            'phone' => 'required|numeric',
            'password' => 'required|max:255',
        ]);
        $student = Student::create($storeData);

        return redirect('/students')->with('completed', 'Student has been 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)
    {
        $student = Student::findOrFail($id);
        return view('edit', compact('student'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $updateData = $request->validate([
            'name' => 'required|max:255',
            'email' => 'required|max:255',
            'phone' => 'required|numeric',
            'password' => 'required|max:255',
        ]);
        Student::whereId($id)->update($updateData);
        return redirect('/students')->with('completed', 'Student has been updated');
    }

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

        return redirect('/students')->with('completed', 'Student has been deleted');
    }
}

100

101

102

103

104

105

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Student;

class StudentController extends Controller

{

/**

* Display a listing of the resource.

* @return \Illuminate\Http\Response

public function index()

{

$student = Student::all();

return view('index', compact('student'));

}

/**

* 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)

{

$storeData = $request->validate([

'name' => 'required|max:255',

'email' => 'required|max:255',

'phone' => 'required|numeric',

'password' => 'required|max:255',

]);

$student = Student::create($storeData);

return redirect('/students')->with('completed', 'Student has been 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)

{

$student = Student::findOrFail($id);

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

}

/**

* Update the specified resource in storage.

* @param \Illuminate\Http\Request $request

* @param int $id

* @return \Illuminate\Http\Response

public function update(Request $request, $id)

{

$updateData = $request->validate([

'name' => 'required|max:255',

'email' => 'required|max:255',

'phone' => 'required|numeric',

'password' => 'required|max:255',

]);

Student::whereId($id)->update($updateData);

return redirect('/students')->with('completed', 'Student has been updated');

}

/**

* Remove the specified resource from storage.

* @param int $id

* @return \Illuminate\Http\Response

public function destroy($id)

{

$student = Student::findOrFail($id);

$student->delete();

return redirect('/students')->with('completed', 'Student has been deleted');

}

Configure Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

<?php

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

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

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

Route::resource('students', StudentController::class);

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\StudentController;

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

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

return view('welcome');

});

Route::resource('students', StudentController::class);

Run the following command in terminal to check the various routes for our CRUD app.

Create Views in Laravel with Blade Templates

In this step we will create blade view files for our student CRUD operations. Go to resources/views folder and create the following blade templates in our Laravel project.

layout.blade.php
index.blade.php
create.blade.php
edit.blade.php

Configure Bootstrap in Laravel

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Laravel 8|7|6 CRUD App Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         @yield('content')
      </div>

      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" type="text/js"></script>
   </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel 8|7|6 CRUD App Example</title>

</head>

<body>

@yield('content')

</div>

</body>

</html>

Create, Store & Validate User Data in MySQL Database

Add the following code in the resources/views/create.blade.php file.

@extends('layout')

@section('content')

<style>
    .container {
      max-width: 450px;
    }
    .push-top {
      margin-top: 50px;
    }
</style>

<div class="card push-top">
  <div class="card-header">
    Add User
  </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('students.store') }}">
          <div class="form-group">
              @csrf
              <label for="name">Name</label>
              <input type="text" class="form-control" name="name"/>
          </div>
          <div class="form-group">
              <label for="email">Email</label>
              <input type="email" class="form-control" name="email"/>
          </div>
          <div class="form-group">
              <label for="phone">Phone</label>
              <input type="tel" class="form-control" name="phone"/>
          </div>
          <div class="form-group">
              <label for="password">Password</label>
              <input type="text" class="form-control" name="password"/>
          </div>
          <button type="submit" class="btn btn-block btn-danger">Create User</button>
      </form>
  </div>
</div>
@endsection

@extends('layout')

@section('content')

<style>

.container {

max-width: 450px;

}

.push-top {

margin-top: 50px;

}

</style>

Add User

</div>

@if ($errors->any())

<ul>

@foreach ($errors->all() as $error)

<li>{{ $error }}</li>

@endforeach

</ul>

</div><br />

@endif

@csrf

</div>

<label for="email">Email</label>

</div>

<label for="phone">Phone</label>

</div>

<label for="password">Password</label>

</div>

<button type="submit" class="btn btn-block btn-danger">Create User</button>

</form>

</div>

@endsection

To generate a new user, we are using cerate() mehtod, which is specified in the ShowController.php file.

// StudentController.php

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

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request)
    {
        $storeData = $request->validate([
            'name' => 'required|max:255',
            'email' => 'required|max:255',
            'phone' => 'required|numeric',
            'password' => 'required|max:255',
        ]);
        $student = Student::create($storeData);

        return redirect('/students')->with('completed', 'Student has been saved!');
    }

// StudentController.php

/**

* Show the form for creating a new resource.

public function create()

{

return view('create');

}

/**

* Store a newly created resource in storage.

public function store(Request $request)

{

$storeData = $request->validate([

'name' => 'required|max:255',

'email' => 'required|max:255',

'phone' => 'required|numeric',

'password' => 'required|max:255',

]);

$student = Student::create($storeData);

return redirect('/students')->with('completed', 'Student has been saved!');

}

Show Users Data

// StudentController.php

 public function index()
    {
        $student = Student::all();
        return view('index', compact('student'));
    }

// StudentController.php

public function index()

{

$student = Student::all();

return view('index', compact('student'));

}

Add the following code in the resources/views/index.blade.php file.

@extends('layout')

@section('content')

<style>
  .push-top {
    margin-top: 50px;
  }
</style>

<div class="push-top">
  @if(session()->get('success'))
    <div class="alert alert-success">
      {{ session()->get('success') }}  
    </div><br />
  @endif
  <table class="table">
    <thead>
        <tr class="table-warning">
          <td>ID</td>
          <td>Name</td>
          <td>Email</td>
          <td>Phone</td>
          <td>Password</td>
          <td class="text-center">Action</td>
        </tr>
    </thead>
    <tbody>
        @foreach($student as $students)
        <tr>
            <td>{{$students->id}}</td>
            <td>{{$students->name}}</td>
            <td>{{$students->email}}</td>
            <td>{{$students->phone}}</td>
            <td>{{$students->password}}</td>
            <td class="text-center">
                <a href="{{ route('students.edit', $students->id)}}" class="btn btn-primary btn-sm"">Edit</a>
                <form action="{{ route('students.destroy', $students->id)}}" method="post" style="display: inline-block">
                    @csrf
                    @method('DELETE')
                    <button class="btn btn-danger btn-sm"" type="submit">Delete</button>
                  </form>
            </td>
        </tr>
        @endforeach
    </tbody>
  </table>
<div>
@endsection

@extends('layout')

@section('content')

<style>

.push-top {

margin-top: 50px;

}

</style>

@if(session()->get('success'))

</div><br />

@endif

<thead>

<td>Email</td>

<td>Phone</td>

<td>Password</td>

<td class="text-center">Action</td>

</tr>

</thead>

<tbody>

@foreach($student as $students)

<tr>

<td>{{$students->id}}</td>

<td>{{$students->name}}</td>

<td>{{$students->email}}</td>

<td>{{$students->phone}}</td>

<td>{{$students->password}}</td>

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

<form action="{{ route('students.destroy', $students->id)}}" method="post" style="display: inline-block">

@csrf

@method('DELETE')

<button class="btn btn-danger btn-sm"" type="submit">Delete</button>

</form>

</td>

</tr>

@endforeach

</tbody>

</table>

<div>

@endsection

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Create PHP Laravel 8 CRUD Web App with MySQL Database