CRUD Laravel 8 Turorial for Beginner. As general, to learn a new thing of laravel 8 always start from learn CRUD (Create, Read, Update, Delete) tutorial.
From this article, you will study step by step to build a simple and user friendly CRUD Laravel 8.
Beside that, you also can download source code that available in the end of this article.
Ok, directly let’s we start.
Let’s go!
Laravel 8 Introduction
Taylor Otwell has been release Laravel 8 in Sept 8, 2020.
In this new version, Laravel 8 give many new features and cool LTS support that we must know.
For more information you can read article bellow:
Read More: New Fitur and Laravel 8 Review That You Must Know
Have you ever read it?
If done, certainly, you not be patient to know how to build basic application like insert, update, delete in Laravel.
Not difficult!
… here, you just need to follow several basic step to use controller, model, route, bootstrap 4 and blade.
Step #1 Install Laravel 8
There are two ways to install Laravel 8: first, with Laravel Installer and second, with composer.
First Way: Use Laravel Installer
First of all, please type command bellow to install:
composer global require laravel/installer
Then, create new project with type command bellow:
laravel new laravel_8_crud
Second Way: Use Composer
This is the easiest way that we can do, please type command bellow:
composer create-project --prefer-dist laravel/laravel laravel_8_crud
Read Also:
Then wait until the installation done.
Step #2 Database Configuration
Step two is configuration the database please activation your web server like XAMPP, Laragon, MAMP, Nginx and so on.
Then, create new name database db_laravel_8_crud.
GAMBAR
After that, open .env file in blog/.env directory.
Change database name, root, password, and so on, that corresponding with your web server.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=db_laravel8_crud DB_USERNAME=root DB_PASSWORD=
Save.
Step #3 Create Migration and Model
In this case, we will use table posts as example. That’s way we need to create table and model in once, first.
Please type command bellow:
php artisan make:model Post --migration
Then open migrations folder in laravel_8_crud/database/migrations directory.
After that, modification scheme field table posts with this code:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('content');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
Finish change the code?
If done, let’s we run command bellow so that field that have been done integrated in database.
php artisan migrate
Step #4 Create Resource Controller
In this step, we will create controller laravel 8.
Please type command bellow to create resource controller:
php artisan make:controller PostController --resource
If success, there is PostController.php file in app/Http/Controllers directory.
… inside PostController.php there are functions:
- index()
- create()
- store()
- edit()
- destroy()
Now, we will modified the file content as code bellow:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post;
class PostController extends Controller
{
public function index()
{
$posts = Post::latest()->paginate(5);
return view('posts.index',compact('posts'))
->with('i', (request()->input('page', 1) - 1) * 5);
}
public function create()
{
return view('posts.create');
}
public function store(Request $request)
{
$request->validate([
'title' => 'required',
'content' => 'required',
]);
Post::create($request->all());
return redirect()->route('posts.index')
->with('success','Post created successfully.');
}
public function show(Post $post)
{
return view('posts.show',compact('post'));
}
public function edit(Post $post)
{
return view('posts.edit',compact('post'));
}
public function update(Request $request, Post $post)
{
$request->validate([
'title' => 'required',
'content' => 'required',
]);
$post->update($request->all());
return redirect()->route('posts.index')
->with('success','Post updated successfully');
}
public function destroy(Post $post)
{
$post->delete();
return redirect()->route('posts.index')
->with('success','Post deleted successfully');
}
}
Save.
Step #5 Modification Model
Please open app/Models/Post.php file and add fillable.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $fillable = [
'title', 'content'
];
}
Save.
Step #6 Add Route
Now, we add route to access resource controller post.
Open routes/web.php directory and add:
use App\Http\Controllers\PostController;
Route::resource('posts', PostController::class);
Save.
Step #7 Create View Page
In the end of this step, we will create several view file use bootstrap.
View page that we will create are:
- template.blade.php
- index.blade.php
- create.blade.php
- show.blade.php
- edit.blade.php
Let’s go!
Please create new file name template.blade.php in resources/views directory.
Then, type this code:
<!DOCTYPE html>
<html>
<head>
<title>Tutorial CRUD Laravel 8 untuk Pemula - Ilmucoding.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
@yield('content')
</div>
</body>
</html>
Then, create new folder in views named posts.
1# posts/index.blade.php
@extends('template')
@section('content')
<div class="row mt-5 mb-5">
<div class="col-lg-12 margin-tb">
<div class="float-left">
<h2>Tutorial CRUD Laravel 8 untuk Pemula - Ilmucoding.com</h2>
</div>
<div class="float-right">
<a class="btn btn-success" href="{{ route('posts.create') }}"> Create 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 width="20px" class="text-center">No</th>
<th>Title</th>
<th width="280px"class="text-center">Action</th>
</tr>
@foreach ($posts as $post)
<tr>
<td class="text-center">{{ ++$i }}</td>
<td>{{ $post->title }}</td>
<td class="text-center">
<form action="{{ route('posts.destroy',$post->id) }}" method="POST">
<a class="btn btn-info btn-sm" href="{{ route('posts.show',$post->id) }}">Show</a>
<a class="btn btn-primary btn-sm" href="{{ route('posts.edit',$post->id) }}">Edit</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Apakah Anda yakin ingin menghapus data ini?')">Delete</button>
</form>
</td>
</tr>
@endforeach
</table>
{!! $posts->links() !!}
@endsection
Save.
Then, we will create view.
2# posts/create.blade.php
@extends('template')
@section('content')
<div class="row mt-5 mb-5">
<div class="col-lg-12 margin-tb">
<div class="float-left">
<h2>Create New Post</h2>
</div>
<div class="float-right">
<a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><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>Title:</strong>
<input type="text" name="title" class="form-control" placeholder="Title">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Content:</strong>
<textarea class="form-control" style="height:150px" name="content" placeholder="Content"></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
Save.
Then, we will create show view.
3# posts/show.blade.php
@extends('template')
@section('content')
<div class="row mt-5 mb-5">
<div class="col-lg-12 margin-tb">
<div class="float-left">
<h2> Show Post</h2>
</div>
<div class="float-right">
<a class="btn btn-secondary" 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>Title:</strong>
{{ $post->title }}
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Content:</strong>
{{ $post->content }}
</div>
</div>
</div>
@endsection
Save.
Then, we will create edit view.
4# posts/edit.blade.php
@extends('template')
@section('content')
<div class="row mt-5 mb-5">
<div class="col-lg-12 margin-tb">
<div class="float-left">
<h2>Edit Post</h2>
</div>
<div class="float-right">
<a class="btn btn-secondary" href="{{ route('posts.index') }}"> Back</a>
</div>
</div>
</div>
@if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><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>Title:</strong>
<input type="text" name="title" value="{{ $post->title }}" class="form-control" placeholder="Title">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Content:</strong>
<textarea class="form-control" style="height:150px" name="content" placeholder="Content">{{ $post->content }}</textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Update</button>
</div>
</div>
</form>
@endsection
Step #8 Laravel 8 CRUD Testing
It still same with laravel in previous version, to run the apps, we type this code:
php artisan serve
Then, open browser and type URL bellow:
http://127.0.0.1:8000/posts
If success, then will appear this page:
Click Create Post Button, then will appear this page:
Please fill with title and content. If done, click submit.
… and to appear Detail, bisa click tombol Show in index page.
The result:
The end, this is Edit Page:
Closing
Alhamdulillah, simple tutorial of CRUD Laravel 8 is done now.
We ever learn more about Laravel 8 development, the new thing in route, create model and migration, and create view and so on.
For those who want download this project, please click link bellow:
I hope this is useful for you.
