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

Tutorial CRUD Laravel 8 untuk Pemula

6 min read

Tutorial Simple CRUD Laravel 8 untuk Pemula

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!

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:

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

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:

Kemudian tunggu sampai installasi selesai.

Step #2 – Konfigurasi Database

Step kedua yaitu dengan mengatur database.

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)

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_laravel8_crud
DB_USERNAME=root
DB_PASSWORD=

Tips 2: Konfigurasi Database di MAMP (MAC Os)

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=8889
DB_DATABASE=db_laravel8_crud
DB_USERNAME=root
DB_PASSWORD=root

Save.

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:

<?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');
    }
}

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.

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:

<?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 – Modifikasi Model

Silahkan buka file app/Models/Post.php dan tambahkan 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'
    ];
}

Step #6 – Menambahkan Route

Sakarang kita tambahkan route untuk mengakses resource controller Post.

Buka routes/web.php dan tambahkan:

use App\Http\Controllers\PostController;
Route::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:

<!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>

Kemudian buat folder baru di dalam views bernama 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

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

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

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 7# – Testing Program

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

php artisan migrate

Kemudian buka browser dan ketik URL berikut:

http://127.0.0.1:8000/posts

Jika berhasil maka akan tampil halaman seperti ini:

Create, Read, Update, Delete (CRUD) Laravel 8

Klik tombol Create Post, maka akan muncul halaman seperti di bawah ini:

Halaman Tambah Data

Silahkan isi dengan judul dan content. Jika sudah, klik tombol Submit.

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

Hasilnya:

Create, Read, Update, Delete (CRUD) Laravel 8

Terakhir, ini halaman edit:

Halaman Edit Data

Penutup

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

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

Buat yang ingin download project ini, silahkan klik link di bawah ini:

Download Source Code

Catatan:

Insya Allah akan ada tutorial Laravel 8 lainnya yang akan kami posting di situs ilmucoding.com.

Mohon do’anya pembaca sekalian. Terima kasih banyak.

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

2 Replies to “Tutorial CRUD Laravel 8 untuk Pemula”

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.