Fitur create, read, update dan delete adalah suatu fitur yang harus ada didalam suatu project software atau aplikasi. Mengapa demikian? Yaa, karena setiap aplikasi pasti akan menerapkan fitur ini, CRUD (Create, Read, Update, Delete). Kecuali jika website yang temen-temen bangun hanya berupa landing page yaa.. dimana hanya butuh satu halaman saja.

Pada tutorial kali ini, saya akan memberikan langkah demi langkah, gimana sih cara membuat aplikasi CRUD sederhana dengan menggunkan Laravel 6. Yang nantinya, temen-temen bisa paham dan bisa mempraktekannya sendiri secara mandiri, atau artikel ini juga bisa membantu temen-temen yang sedang mencari tutorial CRUD pada Laravel 6. Dan temen-temen akan memahami bagaimana cara menggunakan route, controller, blade file, model dan migration untuk mengoperasikan CRUD pada Laravel 6.

Memang tutorial terhitung telat, karena saat ini Laravel sudah masuk ke versi 8, wkwk… akan tetapi saya tetap teruskan untuk menulis tutorial ini dikarenakan masih banyak web developer yang menggunakan Laravel versi 6. Jadi, it’s no problem… hehe

Pada artikel kali ini, temen-temen akan belajar basic dari operasi CRUD dengan Laravel. Saya akan paparkan tutorialnya langkah demi langkah supaya temen-temen lebih mudah untuk memahaminya. Silahkan temen-temen ikuti prosedur step by step-nya dibawah ini:

1. Melakukan Instalasi Laravel Versi 6

Langkah pertama, kita memerlukan paket kerangka kerja laravel. Terlebih dulu kita harus menginstalnya di laptop/ komputer kita. Kita akan menggunkan Laravel versi 6, sesuai dengan topik pada judul pembahasan kita yaa… “Cara membuat aplikasi CRUD sederhana di Laravel 6”. Untuk melakukan instalasi mungkin sebagaian temen-temen sudah paham caranya, karena ini basic. Caranya, silahkan buka terminal/ CMD pada windows. Lalu jalankan perintah dibawah ini, lalu tekan enter.

composer create-project --prefer-dist laravel/laravel blog "6.*"

Kode diatas merupakan perintah untuk melakukan instalasi laravel yang akan kita jalankan lewat terminal/ CMD, kita beri nama project Laravel kita dengan nama “blog”. Karena kita akan menggunakan versi Laravel 6, akan tetapi Laravel sekarang sudah rilis ke versi Laravel 8, maka kita tambahkan pada kode diatas “6.*” untuk memberikan tanda bahwa kita akan menginstal Laravel 6. 

2. Mengkonfigurasi Database

Langkah kedua, wajib bin kudu ini mah. Kita akan melakukan konfigurasi untuk nama database, username, password, dll. Seperti biasa, ritual kita setelah menginstal Laravel. wkwk… Supaya apa? supaya aplikasi project Laravel kita bisa terkoneksi dengan database, sehingga nantinya kita bisa melakukan CRUD pada aplikasi kita, karena aplikasi CRUD ini bakalan memerlukan koneksi ke database. Okeh, tanpa panjang lebar, silahkan silahkan temen-temen bukan file .env pada project Laravel yang sudah kita instal tadi dan isikan sesuai dengan dibawah ini.

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

Oh yaa, pastikan sebelumnya temen-temen sudah membuat databasenya, yaa… Untuk DB_CONNECTION silahkan isi dengan tipe database yang akan kita gunakan, saya disini mengunakan “mysql”. Untuk DB_HOST silahkan isikan “127.0.0.1”, ini adalah default bawaan mysql. Lalu untuk DB_PORT silahkan temen-temen isikan dengan “3306”, ini adalah default port bawaan mysql. Untuk DB_DATABASE isikan dengan nama database yang sudah temen-temen buat, saya membuat database dengan nama “blog”, sehingga saya isi dengan nama tersebut. Lalu pada bagian ini DB_USERNAME temen-temen isikan username dari database yang kita gunakan, saya isi dengan “root”. Terakhir, dibagian ini DB_PASSWORD kita masukan password dari database yang kita gunakan, saya kosongkan, karena saya menggunakan settingan bawaan dari databasenya.

Ohhh iya, untuk username sama password, biasanya pengaturan bawaannya yakni: username isi dengan “root”, tanpa tanda petik ya… dan untuk password “dikosongin”, silahkan dikosongkan saja, tidak perlu temen-temen isi yaa…. Kecuali jika temen-temen sudah sebelumnya mengatur secara custom untuk username dan password sendiri yakks. Intinya, pastikan sesusai. Kalau gak sesui, maka sistem tidak akan terkoneksi.

3. Membuat Migration

Langkah ketiga, sebelum kita memulai apliksi CRUD. Pastikan kita sudah membuat file migration di Laravel project kita. Pada kasus ini, kita akan melakukan CRUD untuk sebuah “produk”. Jadi, terlebih dahulu kita akan membuat file migration melalui “php artisan” di terminal/ CMD. Temen-temen bisa melakukannya dengan perintah terminal dibawah ini:

php artisan make:migration create_products_table --create=products

Setelah temen-temen menulisnya di terminal/ CMD, silahkan tekan enter. Maka Laravel akan membuatkan satu file migration untuk produk. Mungkin ada yang bertanya, dimana filenya? Silahkan temen-temen buka “database/migration” pada project Laravelnya. Maka di sana kita akan dapati file migration produk yang sebelumnya sudah kita buat melalui php artisan. Silahkan temen-temen buka file tersebut, dan samakan isi filenya sesuai dengan kode sintak dibawah ini:

<?php
 
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
  
class CreateProductsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->text('detail');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
}

Pada kode program diatas, setelah kita membuat migration dan kita beri nama products. Pada kode program diatas kita telah menambahkan code berikut,:

$table->string('name');
$table->text('detail');

Dua baris kode diatas kita gunakan untuk memberikan perintah bahwa kita akan menambahkan 2 colom pada tabel products. Dimana kolom tersebut kita beri nama ‘name’ dan ‘detail’. Semoga sampek disini temen-temen bisa paham.

Okeh,… Jika sudah siap, sekarang temen-temen bisa jalankan migration-nya supaya Laravel membuatkan table dengan nama products pada database segaligus colomnya, yakni ‘name’ dan ‘detail’. Nantinya,  Lakukan jalankan dengan perintan terminal/ CMD dibawah ini:

php artisan migrate

4. Menambahkan Resource Route

Dinisi, kita membuatuhkan “resource route” untuk membuat aplikasi CRUD. Bisa dibilang, di “route” ini kita akan mengatur url nya. Lalu, apa bedanya “resource route” dengan “route” biasanya? Okeh, jadi pada kasus ini, kita akan menggunakan fitur dari Laravel yakni “resource” pada Controller. Laravel nantinya akan membuatkan method-method yang siap digunakan untuk operasi CRRUD, seperti: index(): untuk menampilkan data, create(): untuk membuat data, store(): untuk memproses, show(): untuk menampilkan, edit(): untuk melakukan edit, update(): untuk melakukan update, destroy(): untuk menghapus. Jadi kita tinggal pakai saja method-method tersebut, tanpa kita harus membuat satu-satu. Oleh karenanya, di route ini kita akan menggunakan “resource route” supaya lebih simpel url-nya.

Okeh, kita kembali ke topik pembahasan kita. Hehe… Untuk membuat “resource route” silahkan temen-temen buka “routes/web.php” pada project Laravel kita. Lalu tambahkan route seperti dibawah ini:

Route::resource('products','ProductController');

5. Membuat Controller dan Model

Selanjutnya kita akan membuat controller dan akan kita beri nama ProductController. Kita akan membuat logic untuk sistem aplikasi CRUD pada ProductController ini. Kita akan membuat controller melalui terminal/ CMD pada windows. Ketikan kode dibawah ini pada terminal temen-temen.

php artisan make:controller ProductController --resource --model=Product

Setelah temen-temen meng-enter perintah diatas, makan Laravel akan membuatkan file ProductController. File ini terletak pada direktori “app/Http/Controllers/ProductController.php”.

Pada controller ini, kita akan mendapatkan 7 method bawaan dari Laravel. Karena pada saat kita membuat controller di termina/ CMD, kita menambahkan perintah “–resource”. Sehingga Laravel otomatis akan membuatkan method default untuk melakukan CRUD. Berikut method-method-nya:

  1. Index()
  2. Create()
  3. Store()
  4. Show()
  5. Edit()
  6. Update()
  7. Destroy()

Selanjutnya, let’s go… temen-temen copy kode sintak dibawah ini, kemudian pastekan pada file ProductController.php.

app/Http/Controllers/ProductController.php

<?php
  
namespace App\Http\Controllers;
  
use App\Product;
use Illuminate\Http\Request;
  
class ProductController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $products = Product::latest()->paginate(5);
  
        return view('products.index',compact('products'))
            ->with('i', (request()->input('page', 1) - 1) * 5);
    }
   
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('products.create');
    }
  
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required',
            'detail' => 'required',
        ]);
  
        Product::create($request->all());
   
        return redirect()->route('products.index')
                        ->with('success','Product created successfully.');
    }
   
    /**
     * Display the specified resource.
     *
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function show(Product $product)
    {
        return view('products.show',compact('product'));
    }
   
    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function edit(Product $product)
    {
        return view('products.edit',compact('product'));
    }
  
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Product $product)
    {
        $request->validate([
            'name' => 'required',
            'detail' => 'required',
        ]);
  
        $product->update($request->all());
  
        return redirect()->route('products.index')
                        ->with('success','Product updated successfully');
    }
  
    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Product  $product
     * @return \Illuminate\Http\Response
     */
    public function destroy(Product $product)
    {
        $product->delete();
  
        return redirect()->route('products.index')
                        ->with('success','Product deleted successfully');
    }
}

Oke, selanjutnya silahkan temen-temen buka file “app/Products.php”. Ini ada file method yang digunakan untuk menghandel dari tabel Products. Nah, sekarang silahkan temen-temen ketikan kode dibawah ini pada file “Products.php”.

<?php
  
namespace App;
  
use Illuminate\Database\Eloquent\Model;
   
class Product extends Model
{
    protected $fillable = [
        'name', 'detail'
    ];
}

6. Menambahkan Blade File

Pada langkah terakhir ini, kita akan membuat file blade. Dimana file ini kita gunakan untuk memunculkan tampilan interface dari aplikasi kita nantinya. Silahkan temen-temen buat terlebih dahulu folder product  pada direktori “resource/view”. Kita akan membuat beberapa tampilan dengan menggunakan blade ini, diataranya:

  1. layout.blade.php
  2. index.blade.php
  3. create.blade.php
  4. edit.blade.php
  5. show.blade.php

Selanjutnya kita akan membuat satu-satu dari file balde diatas. Let’s go….

resources/views/products/layout.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Aplikasi CRUD dengan Laravel 6 - Serambi Laravel</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
</head>
<body>
  
<div class="container">
    @yield('content')
</div>
   
</body>
</html>

resources/views/products/index.blade.php

@extends('products.layout')
 
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Aplikasi CRUD dengan Laravel 6 - Serambi Laravel</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-success" href="{{ route('products.create') }}"> Create New Product</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>No</th>
            <th>Name</th>
            <th>Details</th>
            <th width="280px">Action</th>
        </tr>
        @foreach ($products as $product)
        <tr>
            <td>{{ ++$i }}</td>
            <td>{{ $product->name }}</td>
            <td>{{ $product->detail }}</td>
            <td>
                <form action="{{ route('products.destroy',$product->id) }}" method="POST">
   
                    <a class="btn btn-info" href="{{ route('products.show',$product->id) }}">Show</a>
    
                    <a class="btn btn-primary" href="{{ route('products.edit',$product->id) }}">Edit</a>
   
                    @csrf
                    @method('DELETE')
      
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
        @endforeach
    </table>
  
    {!! $products->links() !!}
      
@endsection

resources/views/products/create.blade.php

@extends('products.layout')
  
@section('content')
<div class="row">
    <div class="col-lg-12 margin-tb">
        <div class="pull-left">
            <h2>Add New Product</h2>
        </div>
        <div class="pull-right">
            <a class="btn btn-primary" href="{{ route('products.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('products.store') }}" method="POST">
    @csrf
  
     <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Name:</strong>
                <input type="text" name="name" class="form-control" placeholder="Name">
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Detail:</strong>
                <textarea class="form-control" style="height:150px" name="detail" placeholder="Detail"></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

resources/views/products/edit.blade.php

@extends('products.layout')
   
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2>Edit Product</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('products.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('products.update',$product->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>Name:</strong>
                    <input type="text" name="name" value="{{ $product->name }}" class="form-control" placeholder="Name">
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12">
                <div class="form-group">
                    <strong>Detail:</strong>
                    <textarea class="form-control" style="height:150px" name="detail" placeholder="Detail">{{ $product->detail }}</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

resources/views/products/show.blade.php

@extends('products.layout')
@section('content')
    <div class="row">
        <div class="col-lg-12 margin-tb">
            <div class="pull-left">
                <h2> Show Product</h2>
            </div>
            <div class="pull-right">
                <a class="btn btn-primary" href="{{ route('products.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>Name:</strong>
                {{ $product->name }}
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-12">
            <div class="form-group">
                <strong>Details:</strong>
                {{ $product->detail }}
            </div>
        </div>
    </div>
@endsection

Oke, sekarang aplikasi CRUD kita sudah siap dijalankan. Untuk menjalankannya silahkan jalankan perintan dibawah ini melalui terminal/CMD Windows temen-temen. Yaa

php artisan serve

Kemudian buka di url browser temen-temen

http://localhost:8000/products

Selesai sudah tutorialnya, semoga tutorial ini bisa membantu. Oh ya, tutorial ini saya buat to the poin. Karena tutorial ini saya buat untuk pengguna laravel yang tingkat lanjut ya.. artinya, bagi temen-temen yang sudah familiar banget ama laravel ini. untuk tutorial secara dasar, silahkan temen-temen cek di Bigsource Education yaa… 

Dari kami salam programmer,

BigSource Project Team

https://blog.abdan.xyz/
Do you like Abdan Zam Zam Ramadhan's articles? Follow on social!
Comments to: Cara Membuat Aplikasi CRUD Sederhana di Laravel 6

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

Attach images - Only PNG, JPG, JPEG and GIF are supported.