Tutorial Belajar CRUD pada Laravel 5.7


Assalamualaikum wr.wb
Hallo Sahabat forumkoding! Masih semangat ngoding kan?
Pada artikel kali ini, kita akan belajar tentang Tutorial Belajar CRUD pada Laravel maksudnya adalah kita akan belajar mengenai (Create, Read, Update dan Delete) pada Laravel.
Oke teman-teman gak perlu basa basi lagi, mari kita mulai saja project laravelnya

Install Laravel

Sebelum teman-teman memulai CRUD di laravel, tentunya kita harus menginstall laravel terlebih dahulu. tetapi jika teman-teman yang sudah mempunyai project laravel boleh skip tapah ini.
Sebelumnya kami telah membuatkan tutorial mengenai cara installasi laravel, jadi untuk teman-teman yang belum pernah menginstal laravel bisa kunjungi tutorial berikut Instalasi dan Konfigurasi Server Web.

Jika teman-teman menggunakan linux atau macOS, silahkan lakukan konfigurasi pada beberapa direktori penyimpanan laravel. Namun, jika teman - teman menggunakan window teman - teman bisa lewati bagian ini. 
sudo chmod -R 777 storage
sudo chmod -R 777 bootstrap/cache 
Pada tahap ini silahkan teman - teman memjalankan php artisan serve pada command prompt atau terminal maka akan muncul tampilan seperti dibawah ini:
 Langkah selanjutnya kita akan mengkonfigurasi database

Konfigurasi Database pada Laravel

Setelah teman - teman melakukan instalasi, tahap selanjutnya adalah melakukan konfigurasi database untuk digunakan oleh project laravel kita. Teman - teman cukup membuat database baru, dalam project ini saya akan menggunakan database dengan nama crudlaravel. Kalian bisa menamai databasenya sesuai dengan  keinginan masin-masing. Selanjutnya silahkan buka file .env yang terdapat pada direktori root laravel, dan silahkan lakukan konfigurasi seperti dibawah ini.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=crudlaravel // Silahkan ganti dengan nama database kalian
DB_USERNAME=root          // Silahkan ganti dengan username database kalian
DB_PASSWORD=              // Silahkan ganti dengan password user database kalian
Lagkah selanjutnya membuat model dan migration

Membuat Model dan Migrations

Langkah selanjutnya adalah kita akan membuat model dan migrationnya. Pada pembahasn ini kita akan membuat file model da migrationnya secara langsung, caranya adalah Silahkan teman - teman buka terminal atau command prompt pada windows kalian masing-masing dan ketikan perintah dibawah ini:
php artisan make:model Article -m
Kita bisa melihat pada perintah diatas kita membuat model dengan nama Article, Kemudian terlihat perintah -m maksudnya adalah kita membuat file mifrationnya secara otomatis praktis bukan :)

nah tahap selanjutnya kita akan mengkonfigurasi file migration

Konfigurasi file Migrations

Nah setelah teman-teman berhasil membuat file migration diatas, sekarang telah tiba saatnya untuk mengisi kodingannya. Silahkan buka file migrationnya yang telah kita buat tadi pada direktori database\migrations\xxxx_xx_xx_xxxxxx_create_articles_table.php , Pada method up, silahkan tambahkan kodingan berikut ini

public function up()
{
    Schema::create('articles', function (Blueprint $table) {
        $table->increments('id');
        $table->string('title');
        $table->text('content');
        $table->timestamps();
        $table->softDeletes();
    });
Diatas terlihat 2 atribuat saja yang akan kita buat untuk CRUD supaya lebih mudah untuk teman-teman pahami
Soft Delete merupakan sebuah metode yang sangat disarankan saat teman - teman melakukan operasi hapus data pada database, sehingga data tidak benar - benar hilang. keuntungannya adalah untuk mengantisipasi jika data yang telah kita hapus masih memiliki relasi ditabel yang lainnya yang tentunya akan menyebabkan error saat data tersebut kita hapus secara permanen.   
Jika sudah, silahkan teman-teman lakukan migrasi seperiti perintah berikut:
php artisan migrate 
Jika pada perintah berikut terjadi error specified key was too long, Silahkan teman-teman buka direktori app/Providers/AppServiceProvider.php lalu masukkan kode dibawah ini pada function boot()
use Illuminate\Support\Facades\Schema;
public function boot()
{
    Schema::defaultStringLength(191);
}  
Nah sekarang silahkan teman-teman coba laji untuk melakukan perintah migrations dengan php artisan migrate. Tarraa! migrasi pun selesai dan sukses nah kita bisa lanjut ngoding lagi deh ;)

Konfigurasi Model Article 

setelah kita melakukan konfigurasi pada file migratios, sekarang saatnya teman melakukan konfigurasi pada bagian modelnya. Silahkan buka file modelnya, file ini biasanya terdapat pada drektori app\Article.php. pada file ini kita akan menambahkan beberapa atribut seperti dibawah ini:
<?php

namespace App;

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

class Article extends Model
{
    // Digunakan untuk soft delete secara default saat menghapus data
    use SoftDeletes;
 
    protected $fillable = [
        'title', 'content'
    ];
    protected $dates = ['deleted_at'];
}
Oke, hanya ini saja yang perlu kita  tambahkan pada modelnya. langkah selanjutnya kita akan mengatur routingnya.

Konfigurasi Route pada Laravel

Silahkan teman buka file route yang terdapat pada directori routes\web,php Silahkan tambahkan baris kode berikut:
Route::resource('article', 'ArticleController'); 
Pada route diatasnya terdapat kata resource maksudnya adalah kita memanggil semua function CRUD sehingga kita tidak perlu lagi membuat route untuk CRUD satu persatu, semua secara otomatis disediakan oleh laravel.

nah sekarang kita akan membuat controller resource pada laravel

Membuat Controller Resource untuk CRUD

untuk membuat controller, kita cukup menggunakan perintah php artisan, tetapi karena kita menggunakan route resource , maka kita akan membuat controller dengan resource juga. Silahkan lakukan perintah berikut pada command prompt atau terminal.
php artisan make:controller ArticleController -r 
Coba perhatikan pada perintah diatas terlihat ada tambahasn -r . Fungsinya adalah untuk membuat controller degan tambahasan function CRUD secara otomatis. Jika kita membuka file controller tadi pada direktori app\Http\Controllers\ArticleController.php maka kita akan melihat/menemukan method index()create()store()show()edit()update() dan destroy()

Nah fungsi inilah yang akan kita gunakan untuk membuat CRUD, silahkan teman-teman masukan kodingan 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!');
    }
}
nah kodingan diatas kita membuatnya se sederhana mungikin supaya teman- teman lebih mudah untuk memahaminya. mungkin dalam kasus sesungguhnya akan lebih sulit untuk membuatnya. Tetapi karena ini hanya contoh sederhana maka kita akan membuatnya se sederhana mungkin OK

nah tahap selanjutnya adalah membuat view untuk crud di laravel

Membuat View Untuk CRUD pada Laravel

Pada tahap ini banyak file yang perlu kita buat secara terpisah, maka kita akan membaginya menjadi beberapa sub bab.

Membuat Layouts di Laravel 

Nah untuk Membuat layouts sendiri ini cukup mudah. silahkan kalian buat folder baru pada direktori resources\views\layouts\app.blade.php. supaya sederhana, kita akan mmbuatnya dengan html biasa dan sedikit 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

Nah index disini dimaksudkan untuk membuat rangkaian CRUDnya,  jadi pada file ini, nantinya semua data akan kita tampilkan disini. Silahkan 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
nah perlu kita perhatikan .. biasanya kita membuat perintah hapus dengan method get, nah pada kali ini kita akan menggunakannya dengan method post atau bukan menggunakan sebuah link yang mengarah ke route destroy. karena kita menggunakan route resource , maka secara otomatis laravel meminta teman-teman untuk mengirimkan data melalui HTTP REST, Dalam hal ini kita akan menggunakan {{ method_field('DELETE') }} untuk mensimulasikan method delete.

selanjutnya kita akan membuat view untuk create

Membuat View untuk Create

Untuk create sendiri tentunya kita harus membuat sebuah form atau halaman baru, silahkan buat file baru pada direktori resources\views\article\create.blade.php. Silahkan teman lihat contohnya dibawah ini:
@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
Nah Selanjutnya kita akan membuat halaman untuk  menampilkan datanya

Membuat View untuk Show

Untuk menampilkannya kita hanya perlu menampilkan salah satu artikel saja silahkan teman-teman buat file baru dengan pada resources\views\article\show.blade.php dan silahkan turuti contoh kode dibawah ini:
@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

nah kita selanjutnya akan membuat edit data 

Membuat View untuk Edit

Untuk edit hampir sama seperti membuat view untuk CREAT tetapi bedanya kita harus menampilkan data yang akan diedit pada form, silahkan kalian buat file baru pada direktori resources\views\article\edit.blade.php dan gunakan contoh dibawah ini:
@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 halnya dengan perintah DELETE diatas kita harus menggunakan method spoofing untuk menggunakan perintah PUT pada proses update. kita akan menggunakan {{ method_field ('PUT')}}

Percobaan

nah saatnya kita mencoba aplikasi yang telah kita buat, silahkan jalankan servernya terlebih dahulu. selanjutnya buka browser dan arahkan ke URL ocalhost:8000/article jika benar maka akan muncul tampilan seperti berikut ini:
 Nah Silahkan tekan tombol Artikel baru, maka kita akan diarahkan pada halaman Create
Nah silahkan untuk mencoba membuat artikel, jika terdapat kesalahan saat menginput data, maka aplikasi akan kembali ke halaman tersebut dan menampilkan pesan error. tetapi jika berhasil maka aplikasi tersebuat akan membawa kita pada hamalan index disertai pesan/alert sukses .
Selanjutnya kita akan mencoba untuk melihat data satuan. Silahkan teman klik saja link yang ada pada judul artikel.. maka kita akan melihat tampilan artikel secara utuh
 Nah Berikut adalah percobaan untuk mengubah data, jika teman menekan tombol ubah maka aplikasi akan mengarahkan kita ke haman edit dengan tampilan seperti berikut
Sama halya seperti create ketika kita kenekan tombol simpan maka data yang telah kita ubah akan berubah sesuai apa yang telah kita ubah,
Terimakasih kepada teman-teman yang telah membaca artikel ini,, semoga bermanfaat ;)

0 Response to "Tutorial Belajar CRUD pada Laravel 5.7"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel