Tutorial CRUD pada Laravel 5.5

Tutorial CRUD pada Laravel 5.5 (Lengkap)

December 19, 2017 laravel, php, tutorial, web, web series

Halo sobat koder! Masih ngoding kan? 
Pada artikel kali ini, saya akan memberikan tutorial melakukan CRUD (Create, Read, Update dan Delete) pada Laravel. Sebelumnya saya pernah memberikan tutorial CRUD laravel untuk versi 5.3. Nah, pada kesempatan kali ini, saya akan mencoba mengupdatenya dengan versi yang terbaru yaitu laravel 5.5.
Oke gak perlu basa basi lagi, mari kita mulai saja project membuat CRUD di laravel 5.5. 

Install Laravel

Sebelum memulai melakukan CRUD di Laravel, tentunya kita harus install laravel dong. Tapi buat kalian yang sudah punya projectnya bisa skip tahap ini.

Sebelumnya saya telah membuatkan tutorial juga mengenai cara installnya, jadi untuk kalian yang belum pernah melakukan instalasi laravel, bisa langsung ke tutorial cara install laravel.

Jika kalian menggunakan linux atau macOS, silahkan lakukan konfigurasi permissions pada beberapa direktori laravel. Namun, jika kalian menggunakan windows bisa melewati bagian ini.

sudo chmod -R 777 storage

sudo chmod -R 777 bootstrap/cache

Pada tahap ini, seharusnya jika kalian menjalankan perintah php artisan serve pada terminal maka akan muncul tampilan berikut pada browser.

Konfigurasi Database di Laravel

Setelah melakukan instalasi, tahap selanjutnya adalah melakukan konfigurasi database untuk digunakan laravel. Kalian cukup membuat database baru, dalam hal ini saya akan menggunakan database bernama kodehero_crud. Kalian bisa menamai database dengan nama apapun. Selanjutnya, buka file .env pada direktori root laravel, dan lakukan konfigurasi seperti berikut.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=kodehero_crud // Ganti dengan nama database kalian
DB_USERNAME=root          // Ganti dengan username database kalian
DB_PASSWORD=              // Ganti dengan password user database kalian

Membuat Model dan Migrations

Langkah selanjutnya adalah membuat model dan migrations. Sebelumnya saya pernah membuatkan tutorial mengenai pembuatan migrations menggunakan php artisan. Tetapi prosesnya masih membuat model dan migrations satu persatu. Kali ini akan saya ajarkan bagaimana membuat model dan migrations-nya dalam sekali perintah php artisan. Silahkan buka terminal yang kalian biasa gunakan dan panggil perintah berikut.

php artisan make:model Article -m

Pada perintah diatas, kita membuat model dengan nama Article. Kemudian, dengan menambahkan perintah -m dibelakangnya, maka laravel akan secara otomatis membuatkan migration-nya sekaligus. Praktis kan. 

Konfigurasi file migrations

Setelah berhasil membuat file migrations dengan perintah diatas. Sekarang saatnya mengisi kodingnya. buka file migrations yang telah dibuat tadi pada direktori database\migrations\xxxx_xx_xx_xxxxxx_create_articles_table.php. Pada method up, tambahkan beberapa koding berikut.

public function up()
{
    Schema::create('articles', function (Blueprint $table) {
        $table->increments('id');
        $table->string('title');
        $table->text('content');
        $table->timestamps();
        $table->softDeletes();
    });
}

Pada kode diatas, saya hanya menggunakan 2 atribut saja untuk tabel articles supaya sederhana. Selain itu saya juga menggunakan softDeletes(), supaya nantinya operasi hapus data di tabel kita menggunakan prosedur soft delete bukan permanen delete.

Soft Delete merupakan metode yang sangat disarankan saat kalian melakukan operasi hapus data pada database, sehingga data tidak benar-benar hilang. Hal ini untuk mengantisipasi jika data yang kita hapus masih memiliki relasi dengan data di tabel lain yang tentunya akan mengakibatkan error saat data tersebut dihapus secara permanen.

Jika sudah, silahkan lakukan migrasi dengan perintah berikut.

php artisan migrate

Jika terdapat error specified key was too long, saya sudah menyiapkan tutorial untuk mengatasinya. silahkan baca solusi laravel error specified key was too long.

Konfigurasi file model Article

Setalah melakukan konfigurasi pada file migrations, sekarang saatnya kita melakukan konfigurasi di bagian modelnya. Silahkan buka file modelnya, biasanya terdapat pada direktori app\Article.php. Pada file model ini, saya hanya akan menambahkan beberapa atribut saja.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

class Article extends Model
{
    // Digunakan untuk menggunakan soft delete secara default saat menghapus data
    use SoftDeletes;
 
    protected $fillable = [
        'title', 'content'
    ];
    protected $dates = ['deleted_at'];
}

Oke, cukup ini saja yang perlu kita lakukan pada modelnya. Selanjutnya adalah mengatur routingnya.

Konfigurasi Route di Laravel

Buka file route yang ada di direktori routes\web.php. Tambahkan baris kode berikut.

Route::resource('article', 'ArticleController');

Pada route diatas, saya menggunakan resource, sehingga kita tidak perlu lagi membuat route untuk CRUD satu persatu, Semua otomatis disediakan oleh laravel. 

Membuat Controller Resource untuk CRUD

Untuk membuat controller, cukup dengan menggunakan perintah php artisan saja. Tapi karena kita menggunakan route resource, maka kita akan membuat controller dengan resource juga. Lakukan perintah berikut pada terminal.

php artisan make:controller ArticleController -r

Perhatikan tambahan -r pada perintah diatas. Fungsinya adalah untuk membuat controller dengan tambahan fungsi untuk CRUD secara otomatis. Jika kalian buka file controller yang telah dibuat pada direktori app\Http\Controllers\ArticleController.php, maka kalian akan menemukan method index(), create(), store(), show(), edit(), update() dan destroy(). Fungsi inilah yang akan kita gunakan untuk membuat CRUD. Oke, silahkan masukan koding berikut untuk membuat CRUD-nya.

<?php

namespace App\Http\Controllers;

use App\Article;
use Illuminate\Http\Request;

class ArticleController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $articles = Article::orderBy('id', 'DESC')->paginate(5);
        return view('article.index', compact('articles'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('article.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $this->validate($request, [
            'title' => 'required',
            'content' => 'required'
        ]);

        $article = Article::create($request->all());

        return redirect()->route('article.index')->with('message', 'Artikel berhasil dibuat!');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $article = Article::findOrFail($id);
        return view('article.show', compact('article'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $article = Article::findOrFail($id);
        return view('article.edit', compact('article'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $this->validate($request, [
            'title' => 'required',
            'content' => 'required'
        ]);

        $article = Article::findOrFail($id)->update($request->all());

        return redirect()->route('article.index')->with('message', 'Artikel berhasil diubah!');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $article = Article::findOrFail($id)->delete();
        return redirect()->route('article.index')->with('message', 'Artikel berhasil dihapus!');
    }
}

Kodingan diatas, dibuat sesederhana mungkin supaya mudah dipahami. Dalam kasus yang sesungguhnya, mungkin akan lebih rumit lagi prosesnya. Tapi karena ini hanya contoh CRUD yang sederhana, maka saya buat sesimpel mungkin.

Membuat View untuk CRUD di Laravel

Langkah berikutnya adalah membuat view. Karena pada bagian ini banyak file yang perlu dibuat secara terpisah, maka saya akan bagi menjadi beberapa sub bab.

Membuat layouts di laravel

Untuk membuat layouts, caranya cukup mudah. Silahkan buat folder baru pada direktori resources\views\. Kemudian buat file baru pada folder layouts yang telah kita buat. Pada tutorial ini saya menggunakan nama app.blde.php untuk file layoutnya. Jadi buat file baru pada direktori resources\views\layouts\app.blade.php. Supaya sederhana, saya akan menggunakan html biasa dengan sentuhan bootstrap.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <title>Kodehero - CRUD</title>
    <style>
        .martop-sm {margin-top: 15px;}
        .martop-lg {margin-top: 70px;}
    </style>
</head>
<body>
    <div class="container martop-lg">
        <div class="panel panel-default">
            <div class="panel-body">@yield('content')</div>
        </div>
    </div>
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Membuat View untuk Index 

Index disini, dimaksudkan untuk proses Read pada rangkaian CRUD. Jadi pada view ini, nantinya semua data akan ditampilkan disini. Buat file baru resources\views\article\index.blade.php.

@extends('layouts.app')

@section('content')
    <a href="{{ route('article.create') }}" class="btn btn-info btn-sm">Artikel Baru</a>
    
    @if ($message = Session::get('message'))
        <div class="alert alert-success martop-sm">
            <p>{{ $message }}</p>
        </div>
    @endif

    <table class="table table-responsive martop-sm">
        <thead>
            <th>ID</th>
            <th>Title</th>
            <th>Action</th>
        </thead>
        <tbody>
            @foreach ($articles as $article)
                <tr>
                    <td>{{ $article->id }}</td>
                    <td><a href="{{ route('article.show', $article->id) }}">{{ $article->title }}</a></td>
                    <td>
                        <form action="{{ route('article.destroy', $article->id) }}" method="post">
                            {{csrf_field()}}
                            {{ method_field('DELETE') }}
                            <a href="{{ route('article.edit', $article->id) }}" class="btn btn-warning btn-sm">Ubah</a>
                            <button type="submit" class="btn btn-danger btn-sm">Hapus</button>
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

Perlu diperhatikan disini, bahwa untuk penghapusan data sebaiknya kita menggunakan method post, bukan menggunakan link yang mengarah ke route destroy. Selain itu, karena kita menggunakan route resource, maka otomatis laravel meminta kita untuk mengirim data melalui HTTP REST, tetapi karena pada dasarnya HTML Form tidak support hal tersebut, kita harus menggunakan method spoofing. Dalam hal ini, saya menggunakan {{ method_field('DELETE') }} untuk mensimulasikan method DELETE

Membuat View untuk Create

Untuk Create, tentunya kita akan membuat sebuah form. Buat file baru pada direktori resources\views\article\create.blade.php. Silahkan lihat contohnya dibawah.

@extends('layouts.app')

@section('content')
<h4>Artikel Baru</h4>
<form action="{{ route('article.store') }}" method="post">
    {{csrf_field()}}
    <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
        <label for="title" class="control-label">Title</label>
        <input type="text" class="form-control" name="title" placeholder="Title">
        @if ($errors->has('title'))
            <span class="help-block">{{ $errors->first('title') }}</span>
        @endif
    </div>
    <div class="form-group {{ $errors->has('content') ? 'has-error' : '' }}">
        <label for="content" class="control-label">Content</label>
        <textarea name="content" cols="30" rows="5" class="form-control"></textarea>
        @if ($errors->has('content'))
            <span class="help-block">{{ $errors->first('content') }}</span>
        @endif
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-info">Simpan</button>
        <a href="{{ route('article.index') }}" class="btn btn-default">Kembali</a>
    </div>
</form>
@endsection

Membuat View untuk Show

Untuk Show, kita hanya perlu menampilkan data salah satu artikel saja. Buat file baru pada direktori resources\views\article\show.blade.php dan gunakan contoh kode dibawah.

@extends('layouts.app')

@section('content')
<h4>{{ $article->title }}</h4>
<p>{{ $article->content }}</p>
<a href="{{ route('article.index') }}" class="btn btn-default">Kembali</a>
@endsection

Membuat View untuk Edit

Untuk edit kurang lebih mirip dengan saat membuat view untuk Create. Bedanya, disini, kita harus menampilkan data yang akan di edit pada form. Buat file baru pada direktori resources\views\article\edit.blade.php dan gunakan contoh kode dibawah.

@extends('layouts.app')

@section('content')
<h4>Ubah Artikel</h4>
<form action="{{ route('article.update', $article->id) }}" method="post">
    {{csrf_field()}}
    {{ method_field('PUT') }}
    <div class="form-group {{ $errors->has('title') ? 'has-error' : '' }}">
        <label for="title" class="control-label">Title</label>
        <input type="text" class="form-control" name="title" placeholder="Title" value="{{ $article->title }}">
        @if ($errors->has('title'))
            <span class="help-block">{{ $errors->first('title') }}</span>
        @endif
    </div>
    <div class="form-group {{ $errors->has('content') ? 'has-error' : '' }}">
        <label for="content" class="control-label">Content</label>
        <textarea name="content" cols="30" rows="5" class="form-control">{{ $article->content }}</textarea>
        @if ($errors->has('content'))
            <span class="help-block">{{ $errors->first('content') }}</span>
        @endif
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-info">Simpan</button>
        <a href="{{ route('article.index') }}" class="btn btn-default">Kembali</a>
    </div>
</form>
@endsection

Sama seperti DELETE diatas, kita harus menggunakan method spoofing untuk menggunakan PUT pada proses update. Dalam hal ini, saya menggunakan {{ method_field('PUT') }} untuk mensimulasikan method PUT.

Percobaan Aplikasi

Setalah bersusah payah diatas, sekarang saatnya kita mencoba aplikasi kita. 

Kita jalankan dulu servernya dengan perintah php artisan serve. Selanjutnya buka browser dan arahkan ke URL localhost:8000/article. Jika berhasil maka akan muncul tampilan seperti dibawah.

Kemudian, jika kita klik tombol Artikel Baru, maka akan diarahkan ke view Create. Jika berhasil maka tampilannya akan seperti ini.

Silahkan coba untuk membuat artikel baru, jika ada kesalahan input data, maka aplikasi akan kembali ke halaman tersebut dan menampilkan pesan error. Namun, jika berhasil maka aplikasi akan kembali ke halaman index dengan pesan sukses.

Selanjutnya adalah percobaan untuk melihat data satuan. Caranya, klik saja link yang ada pada judul artikel. Maka akan terlihat tampilan artikel secara utuh.

Berikutnya, adalah percobaan ubah data. Jika kalian tekan tombol Ubah, maka aplikasi akan menuju view edit dengan tampilan sebagai berikut.

Sama seperti create, ketika tombol Simpan ditekan maka aplikasi akan mengecek input dari user, jika tidak ada kesalahan maka aplikasi akan kembali ke halaman index dan menampilkan pesan sukses.

Yang terakhir adalah proses delete. Jika tombol Hapus ditekan, maka data akan dihapus. Namun, hapus disini tidak secara permanen, melainkan hanya sementara menggunakan metode soft delete. Sehingga jika data ini nantinya punya relasi dengan data lain, tidak akan terjadi error jika dihapus.

 

Sumber : https://www.kodehero.com/2017/12/tutorial-crud-pada-laravel-55-lengkap.html