Tutorial CRUD Laravel 8 untuk Pemula

31 October 2020 6 min read

Loading...

Tutorial CRUD Laravel 8 untuk Pemula. Seperti pada umumnya, untuk mempelajari hal
baru dari Laravel 8 selalu dimulai dari mempelajari tutorial Create, Read, Update dan Delete
(CRUD).

Melalui artikel ini, kamu akan belajar step by step membuat CRUD Laravel 8 yang simple
dan mudah dipahami.

Selain itu, kamu juga bisa download source code yang tersedia di akhir artikel ini.

Oke, langsung saja kita mulai cara membuat CRUD Laravel 8.

Let’s Go!

Daftar Isi

Pengenalan Laravel 8
Taylor Otwell baru saja merilis Laravel 8 pada tanggal 8 September 2020.
Pada versi terbaru ini, Laravel 8 memberikan beberapa fitur baru dan dukungan LTS yang
keren yang perlu kita ketahui. Selengkapnya bisa kamu baca melalui artikel di bawah ini:

Loading...

Baca Juga: Fitur dan Ulasan Laravel 8 yang Wajib Kamu Tahu

Sudah membacanya?

Kalau sudah pasti kamu sudah nggak sabar bagaimana membuat aplikasi dasar seperti insert,
update dan delete di Laravel 8.

Nggak sulit!

… di sini kamu hanya perlu mengikuti beberapa langkah dasar menggunakan controller,
model, route, bootstrap 4 dan blade.

Step #1 – Install Laravel 8

Ada 2 cara yang dapat dilakukan untuk menginstall Laravel 8. Pertama dengan Laravel
Installer dan yang kedua dengan composer.

Cara 1: Menggunakan Laravel Installer

Loading...

Silahkan ketik command di bawah ini untuk menginstall Laravel terlebih dahulu:

composer global require laravel/installer

Kemudian buat project baru dengan ketik command berikut ini:

laravel new laravel8_crud

Cara 2: Menggunakan Composer

Ini adalah cara termudah yang biasa kita lakukan, cukup dengan ketik perintah berikut ini:

composer create-project --prefer-dist laravel/laravel laravel8_crud

Baca Juga:

 Tutorial Cara Install Laravel 6

 Tutorial Install Laravel 7 Menggunakan Composer

Kemudian tunggu sampai installasi selesai.

Step #2 – Konfigurasi Database

Step kedua yaitu dengan mengatur database.

Loading...

Silahkan aktifkan web server yang kamu gunakan semisal XAMPP, Laragon, MAMP, Nginx
dan lain-lain.

Kemudian buat database baru bernama db_laravel8_crud.

Setelah itu, buka file .env yang ada di dalam direktori blog/.env.

Ubah nama database, root, password dll yang sesuai dengan web server kamu lakukan.

Tips 1: Konfigurasi Database di XAMPP (Windows / Linux) dan Laragon (Windows)

?
1DB_CONNECTION=mysql
2DB_HOST=127.0.0.1
3DB_PORT=3306
4DB_DATABASE=db_laravel8_crud
5DB_USERNAME=root
DB_PASSWORD=
6

Tips 2: Konfigurasi Database di MAMP (MAC Os)

?
1DB_CONNECTION=mysql
2DB_HOST=127.0.0.1
3DB_PORT=8889
4DB_DATABASE=db_laravel8_crud
5DB_USERNAME=root
DB_PASSWORD=root
6

Save.

Loading...

Step #3 – Membuat Migration dan Model

Pada studi kasus kita kali ini akan menggunakan table posts sebagai contoh. Maka dari itu
kita perlu membuat table sekaligus model-nya terlebih dahulu.

Silahkan ketik command di bawah ini:

php artisan make:model Post --migration

Kemudian buka folder migrations yang ada di direktori laravel8_crud/database/migrations.

Lalu modifikasi skema field table posts dengan kode di bawah ini:
?
1 <?php
2  
use Illuminate\Database\Migrations\Migration;
3
use Illuminate\Database\Schema\Blueprint;
4 use Illuminate\Support\Facades\Schema;
5  
6 class CreatePostsTable extends Migration
7 {
8     /**
     * Run the migrations.
9      *
1      * @return void
0      */
1     public function up()
1     {
        Schema::create('posts', function (Blueprint $table) {
1             $table->id();
2             $table->string('title');
1             $table->text('content');
3             $table->timestamps();
        });
1     }
4
 
1     /**
5      * Reverse the migrations.
1      *
6      * @return void
     */
1     public function down()
7     {
1         Schema::dropIfExists('posts');
8     }
1 }
9
2
0
2
1
2
2
2
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3

Sudah selesai mengubah kodenya?

Jika sudah kita jalankan command di bawah ini agar field yang kita buat akan ter-migrasi ke
database:

php artisan migrate

Step #4 – Membuat Resource Controller

Pada tahap ini kita akan membuat controller di Laravel 8.

Loading...
Loading...

Silahkan ketik command di bawah ini untuk membuat resource controller:

php artisan make:controller PostController --resource

Jika berhasil maka akan terdapat file PostController.php di dalam direktori

app/Http/Controllers.

… di dalam PostController.php sudah tersedia beberapa function, yaitu:

 index()
 create()
 store()
 show()
 edit()
 destroy()

Sekarang kita modifikasi isi file tersebut seperti kode di bawah ini:

?
1 <?php
2  
namespace App\Http\Controllers;
3
4  
use Illuminate\Http\Request;
5 use App\Models\Post;
6   
7 class PostController extends Controller
8 {
9     public function index()
    {
1
        /// mengambil data terakhir dan pagination 5 list
0         $posts = Post::latest()->paginate(5);
1          
1         /// mengirimkan variabel $posts ke halaman views
1 posts/index.blade.php
2         /// include dengan number index
        return view('posts.index',compact('posts'))
1             ->with('i', (request()->input('page', 1) - 1) * 5);
3     }
1   
4     public function create()
1     {
5         /// menampilkan halaman create
        return view('posts.create');
1     }
6   
1     public function store(Request $request)
7     {
1         /// membuat validasi untuk title dan content wajib diisi
8         $request->validate([
            'title' => 'required',
1             'content' => 'required',
9         ]);
2          
0         /// insert setiap request dari form ke dalam database via model
2         /// jika menggunakan metode ini, maka nama field dan nama form
1 harus sama
        Post::create($request->all());
2
         
2         /// redirect jika sukses menyimpan data
2         return redirect()->route('posts.index')
3                         ->with('success','Post created successfully.');
2     }
4   
2     public function show(Post $post)
    {
5         /// dengan menggunakan resource, kita bisa memanfaatkan model
2 sebagai parameter
6         /// berdasarkan id yang dipilih
2         /// href="{{ route('posts.show',$post->id) }}
        return view('posts.show',compact('post'));
7     }
2   
8     public function edit(Post $post)
2     {
9         /// dengan menggunakan resource, kita bisa memanfaatkan model
3 sebagai parameter
        /// berdasarkan id yang dipilih
0         /// href="{{ route('posts.edit',$post->id) }}
3         return view('posts.edit',compact('post'));
1     }
3   
2     public function update(Request $request, Post $post)
3     {
        /// membuat validasi untuk title dan content wajib diisi
3         $request->validate([
3             'title' => 'required',
4             'content' => 'required',
        ]);
3
5          
        /// mengubah data berdasarkan request dan parameter yang
3 dikirimkan
6         $post->update($request->all());
3          
7         /// setelah berhasil mengubah data
3         return redirect()->route('posts.index')
                        ->with('success','Post updated successfully');
8     }
3
  
9     public function destroy(Post $post)
4     {
0         /// melakukan hapus data berdasarkan parameter yang dikirimkan
4         $post->delete();
1   
        return redirect()->route('posts.index')
4                         ->with('success','Post deleted successfully');
2     }
4 }
3
4
4
4
5
4
6
4
7
4
8
4
9
5
0
5
1
5
2
5
3
5
4
5
5
5
6
5
7
5
8
5
9
6
0
6
1
6
2
6
3
6
4
6
5
6
6
6
7
6
8
6
9
7
0
7
1
7
2
7
3
7
4
7
5
7
6
7
7
7
8
7
9
8
0
8
1
8
2
8
3
8
4

Save.

Step #5 – Modifikasi Model

Silahkan buka file app/Models/Post.php dan tambahkan fillable.

?
1
2
3
4
5 <?php
6  
namespace App\Models;
7
8  
use Illuminate\Database\Eloquent\Factories\HasFactory;
9 use Illuminate\Database\Eloquent\Model;
1  
0 class Post extends Model
1 {
1     use HasFactory;
1  
    protected $fillable = [
2         'title', 'content'
1     ];
3 }
1
4
1
5

Step #6 – Menambahkan Route

Sakarang kita tambahkan route untuk mengakses resource controller Post.

Loading...

Buka routes/web.php dan tambahkan:

?
1use App\Http\Controllers\PostController;
2Route::resource('posts', PostController::class);

Simpan.

Step #7 – Membuat Halaman View

Pada step terakhir ini, kita akan membuat beberapa file view menggunakan bootstrap.
Adapun halaman view yang akan kita buat adalah:

 template.blade.php
 index.blade.php
 create.blade.php
 show.blade.php
 edit.blade.php

Let’s go!

Silahkan buat file baru bernama template.blade.php di direktori resources/views.

Kemudian ketik kode berikut ini:

Loading...
?
1
2
3
<!DOCTYPE html>
4 <html>
5 <head>
6     <title>Tutorial CRUD Laravel 8 untuk Pemula - Ilmucoding.com</title>
7     <link rel="stylesheet"
8 href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.c
ss">
9 </head>
1 <body>
0  
1 <div class="container">
1     @yield('content')
1 </div>
2  </body>
1 </html>
3
1
4

Kemudian buat folder baru di dalam views bernama posts.

1# posts/index.blade.php

?
1 @extends('template')
2  
@section('content')
3
    <div class="row mt-5 mb-5">
4         <div class="col-lg-12 margin-tb">
5             <div class="float-left">
6                 <h2>Tutorial CRUD Laravel 8 untuk Pemula -
7 Ilmucoding.com</h2>
            </div>
8             <div class="float-right">
9                 <a class="btn btn-success"
1 href="{{ route('posts.create') }}"> Create Post</a>
            </div>
0
        </div>
1     </div>
1  
1     @if ($message = Session::get('success'))
2     <div class="alert alert-success">
1         <p>{{ $message }}</p>
    </div>
3     @endif
1  
4     <table class="table table-bordered">
1         <tr>
5             <th width="20px" class="text-center">No</th>
1             <th>Title</th>
            <th width="280px"class="text-center">Action</th>
6         </tr>
1         @foreach ($posts as $post)
7         <tr>
1             <td class="text-center">{{ ++$i }}</td>
            <td>{{ $post->title }}</td>
8             <td class="text-center">
1                 <form action="{{ route('posts.destroy',$post->id) }}"
9 method="POST">
2  
0                     <a class="btn btn-info btn-sm"
2 href="{{ route('posts.show',$post->id) }}">Show</a>
1  
                    <a class="btn btn-primary btn-sm"
2 href="{{ route('posts.edit',$post->id) }}">Edit</a>
2  
2                     @csrf
3                     @method('DELETE')
2  
4                     <button type="submit" class="btn btn-danger btn-sm"
2 onclick="return confirm('Apakah Anda yakin ingin menghapus data
ini?')">Delete</button>
5                 </form>
2             </td>
6         </tr>
2         @endforeach
    </table>
7
2  
    {!! $posts->links() !!}
8  
2 @endsection
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8
4
9
5
0

2# posts/create.blade.php

?
1 @extends('template')
2  
@section('content')
3
<div class="row mt-5 mb-5">
4     <div class="col-lg-12 margin-tb">
5         <div class="float-left">
6             <h2>Create New Post</h2>
7         </div>
        <div class="float-right">
8             <a class="btn btn-secondary"
9 href="{{ route('posts.index') }}"> Back</a>
1         </div>
0     </div>
1 </div>
1  
@if ($errors->any())
1     <div class="alert alert-danger">
2         <strong>Whoops!</strong> There were some problems with your
input.<br><br>
1
        <ul>
3             @foreach ($errors->all() as $error)
1                 <li>{{ $error }}</li>
4             @endforeach
1         </ul>
    </div>
5 @endif
1  
6 <form action="{{ route('posts.store') }}" method="POST">
1     @csrf
7  
1      <div class="row">
8         <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
1                 <strong>Title:</strong>
9                 <input type="text" name="title" class="form-control"
2 placeholder="Title">
0             </div>
        </div>
2         <div class="col-xs-12 col-sm-12 col-md-12">
1             <div class="form-group">
2                 <strong>Content:</strong>
2                 <textarea class="form-control" style="height:150px"
2 name="content" placeholder="Content"></textarea>
            </div>
3         </div>
2         <div class="col-xs-12 col-sm-12 col-md-12 text-center">
4             <button type="submit" class="btn btn-primary">Submit</button>
2         </div>
5     </div>
2  
</form>
6 @endsection
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8

3# posts/show.blade.php

?
1 @extends('template')
2  
@section('content')
3
    <div class="row mt-5 mb-5">
4         <div class="col-lg-12 margin-tb">
5             <div class="float-left">
6                 <h2> Show Post</h2>
7             </div>
            <div class="float-right">
8                 <a class="btn btn-secondary"
9 href="{{ route('posts.index') }}"> Back</a>
1             </div>
0         </div>
1     </div>
1  
    <div class="row">
1         <div class="col-xs-12 col-sm-12 col-md-12">
2             <div class="form-group">
1                 <strong>Title:</strong>
3                 {{ $post->title }}
            </div>
1         </div>
4         <div class="col-xs-12 col-sm-12 col-md-12">
1             <div class="form-group">
5                 <strong>Content:</strong>
1                 {{ $post->content }}
            </div>
6         </div>
1
7
1
8
1
9
2
0
2
1
2
2
2     </div>
3 @endsection
2
4
2
5
2
6
2
7
2
8
2
9

4# posts/edit.blade.php

?
1 @extends('template')
2  
@section('content')
3
    <div class="row mt-5 mb-5">
4         <div class="col-lg-12 margin-tb">
5             <div class="float-left">
6                 <h2>Edit Post</h2>
7             </div>
            <div class="float-right">
8                 <a class="btn btn-secondary" href="{{ route('posts.index')
9 }}"> Back</a>
1             </div>
0         </div>
1     </div>
1  
    @if ($errors->any())
1         <div class="alert alert-danger">
2             <strong>Whoops!</strong> There were some problems with your
1 input.<br><br>
3             <ul>
                @foreach ($errors->all() as $error)
1                     <li>{{ $error }}</li>
4                 @endforeach
1             </ul>
5         </div>
    @endif
1
6  
    <form action="{{ route('posts.update',$post->id) }}" method="POST">
1         @csrf
7         @method('PUT')
1  
8          <div class="row">
1             <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
9                     <strong>Title:</strong>
2                     <input type="text" name="title" value="{{ $post->title
0 }}" class="form-control" placeholder="Title">
2                 </div>
1             </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
2                 <div class="form-group">
2                     <strong>Content:</strong>
2                     <textarea class="form-control" style="height:150px"
3 name="content" placeholder="Content">{{ $post->content }}</textarea>
                </div>
2             </div>
4             <div class="col-xs-12 col-sm-12 col-md-12 text-center">
2               <button type="submit" class="btn btn-
5 primary">Update</button>
2             </div>
        </div>
6
 
2     </form>
7 @endsection
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
4
4
4
5
4
6
4
7
4
8
4
9

Step 8# – Testing Program

Masih sama dengan laravel versi sebelumnya, untuk menjalankan aplikasi kita ketik
command di bawah ini:

php artisan serve

Kemudian buka browser dan ketik URL berikut:

Loading...
http://127.0.0.1:8000/posts

Jika berhasil maka akan tampil halaman seperti ini:

Klik tombol Create Post, maka akan muncul halaman seperti di bawah ini:
Silahkan isi dengan judul dan content. Jika sudah, klik tombol Submit.

… dan untuk tampilan Detail, bisa klik tombol Show pada halaman index.

Hasilnya:

Terakhir, ini halaman edit:

Penutup
Alhamdulillah, telah selesai tutorial CRUD sederhana menggunakan Laravel 8 pada saat ini.

Loading...

Kita telah banyak belajar tentang pengembangan Laravel 8, hal baru pada route, membuat
model dan migration, membuat controller dan membuat view dan lain-lain.