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.
