Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

CRUD Laravel 8 Tutorial for Beginner

6 min read

CRUD Laravel 8 Tutorial For Beginner

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:

CRUD Laravel 8 Tutorial for Beginner

Click Create Post Button, then will appear this page:

CRUD Laravel 8 Tutorial for Beginner

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:

Download Source Code

I hope this is useful for you.

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.