Laravel 8 CRUD Operation Example
Websolutionstuff | Sep-16-2020 | Categories : Laravel PHP jQuery MySQL CSS HTML Bootstrap
In this article, we will see the laravel 8 crud operation. As you know Laravel 8 has already been officially released and today I will show you how to create a CRUD operation in laravel 8. I have already performed many CRUD operations in my previous post like CRUD operations in AJAX CRUD operations in laravel 6 and laravel 7 etc. So, today we will see the laravel 8 CRUD application example.
If you have curious about how to create crud in laravel 8 then follow my steps and get your output. So, let's see how to create a CRUD operation in laravel 8 and laravel 8 CRUD example
CRUD Operation in Laravel 8 Step by Step
Step 1: Install Laravel 8 For CRUD Operation
Step 2: Setup Database Configuration
Step 3: Create Migration And model
Step 4: Add Resource Route
Step 5: Add Controller And Model
Step 6: Add Blade Files For CRUD Operation
Step 7: Run Laravel 8 CRUD Application
In this step, we will install laravel 8 using the following command.
composer create-project --prefer-dist laravel/laravel crud_operation_tutorial
In this step, we will set up the database configuration in the .env file as below.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your database name(laravel_crud)
DB_USERNAME=your database username(root)
DB_PASSWORD=your database password(Null)
we will create migration for the "posts" table using the laravel php artisan command.
php artisan make:migration create_posts_table --create=posts
After running this command you will find php file in the "database/migrations/" location.
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration {
/**
* Run the migrations.
*
* @return void */
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name')->nullable();
$table->longText('detail')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
Now, we will run migration by following the command.
php artisan migrate
Now, Add the Resource route in web.php
routes/web.php
Route::resource('posts','App\Http\Controllers\PostController');
Create the PostController using the following command.
php artisan make:controller PostController --resource --model=Post
Now make changes to the post.php Model.
app/Post.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'id', 'name', 'detail'
];
}
After changes in the model, we will change the PostController.php file.
app/Http/Controllers/PostController.php
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class PostController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$posts = Post::latest()->paginate(5);
return view('post.index',compact('posts'))->with('i', (request()->input('page', 1) - 1) * 5);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('post.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',
'detail' => 'required',
]);
Post::create($request->all());
return redirect()->route('posts.index')->with('success','Post created successfully.');
}
/**
* Display the specified resource.
*
* @param \App\Models\Post $post
* @return \Illuminate\Http\Response
*/
public function show(Post $post)
{
return view('post.show',compact('post'));
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Models\Post $post
* @return \Illuminate\Http\Response
*/
public function edit(Post $post)
{
return view('post.edit',compact('post'));
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Models\Post $post
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Post $post)
{
$request->validate([
'name' => 'required',
'detail' => 'required',
]);
$post->update($request->all());
return redirect()->route('posts.index')->with('success','Post updated successfully');
}
/**
* Remove the specified resource from storage.
*
* @param \App\Models\Post $post
* @return \Illuminate\Http\Response
*/
public function destroy(Post $post)
{
$post->delete();
return redirect()->route('posts.index')->with('success','Post deleted successfully');
}
}
In this step, we have to create blade files. So, mainly we have to create a layout file and then create new folder "posts" and then create blade files of the CRUD application. So, finally you have to create the following below blade file:
1) layout.blade.php
2) index.blade.php
3) create.blade.php
4) edit.blade.php
5) show.blade.php
So let's just create the following file and put the below code.
resources/views/posts/layout.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 CRUD - websolutionstuff.com</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container" style="margin-top: 15px;">
@yield('content')
</div>
</body>
</html>
resources/views/posts/index.blade.php
@extends('post.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Laravel 8 CRUD Example - websolutionstuff.com</h2>
</div>
<div class="pull-right">
<a class="btn btn-success" href="{{ route('posts.create') }}"> Create New Post</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>No</th>
<th>Name</th>
<th>Details</th>
<th width="280px">Action</th>
</tr>
@foreach ($posts as $post)
<tr>
<td>{{ ++$i }}</td>
<td>{{ $post->name }}</td>
<td>{{ $post->detail }}</td>
<td>
<form action="{{ route('posts.destroy',$post->id) }}" method="POST">
<a class="btn btn-info" href="{{ route('posts.show',$post->id) }}">Show</a>
<a class="btn btn-primary" href="{{ route('posts.edit',$post->id) }}">Edit</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger">Delete</button>
</form>
</td>
</tr>
@endforeach
</table>
{!! $posts->links() !!}
@endsection
resources/views/posts/create.blade.php
@extends('post.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Add New Post</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('posts.index') }}"> Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Error!</strong> <br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('posts.store') }}" method="POST">
@csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
<input type="text" name="name" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Detail:</strong>
<textarea class="form-control" style="height:150px" name="detail" placeholder="Detail"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@endsection
resources/views/posts/edit.blade.php
@extends('post.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Edit Post</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('posts.index') }}"> Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Error!</strong> <br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<form action="{{ route('posts.update',$post->id) }}" method="POST">
@csrf
@method('PUT')
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
<input type="text" name="name" value="{{ $post->name }}" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Detail:</strong>
<textarea class="form-control" style="height:150px" name="detail" placeholder="Detail">{{ $post->detail }}</textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
@endsection
resources/views/posts/show.blade.php
@extends('post.layout')
@section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2> Show Post</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('posts.index') }}"> Back</a>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Name:</strong>
{{ $post->name }}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Details:</strong>
{{ $post->detail }}
</div>
</div>
</div>
@endsection
Copy the below command and run it in the terminal.
php artisan serve
You might also like:
Recommended Post
Featured Post
How To Implement Google Bar Ch...
In this tutorial, we will see how to implement google bar chart in vue js. In vue js perform bar chart tutorial we are u...
Jan-17-2022
Laravel 8 Toastr Notifications...
Today, I will show you Laravel 8 Toastr Notifications Example. There are many types of notifications availa...
Oct-19-2020
How To Store JSON Data In Data...
In this article, we will see how to store JSON data in the database laravel 9. Laravel 9 stores JSON data in M...
Sep-28-2022
How To Check Array Is Empty Or...
In this example, I will show you how to check if an array is empty or null in javascript or jquery. When we are wor...
Aug-18-2020