#17-Laravel CRUD Eloquent

Persiapan

Jalankan Tutorial Laravel Eloquent

Setelah menjalankan Tutorial Equolent, artinya langkah awal sudah terpenuhi:

  1. Anda sudah mempunyai database learning_laravel
  2. Anda sudah mempunyai table employees di database learning_laravel
  3. Route ControllerEmployee sudah ditambahkan pada routes/web.php
  4. Anda sudah membuat Controller ControllerEmployee.php, Model Employee.php, dan View employee.blade.php
  5. Anda sudah memiliki 10 baris data pada table employees yang dibuat menggunakan migrate dan seeder

Berikut tampilan http://localhost:8000/employee

Page Employee

Penerapan Eloquent

Kita akan mengubah tampilan employee.blade.php dengan menambahkan button untuk keperluan CRUD dengan menambahkan tombol Tambah, Ubah, & Hapus

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="{{ asset('/css/app.css') }}">
        <title>{{$title}}</title>
    </head>
    <body>
        <div class="container">
            <div class="card mt-5">
                <div class="card-header text-center">
                    {{$title}}
                </div>
                <div class="card-body">
                    <a href="/employee/create" class="btn btn-primary">Tambah Baru</a>
                    <br/>
                    <br/>
                    <table class="table table-bordered table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Alamat</th>
                                <th width="175">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($data as $row)
                            <tr>
                                <td>{{ $row->fullname }}</td>
                                <td>{{ $row->email }}</td>
                                <td>{{ $row->address }}</td>
                                <td>
                                    <a href="/employee/edit/{{ $row->id }}" class="btn btn-warning">Ubah</a>
                                    <a href="/employee/delete/{{ $row->id }}" class="btn btn-danger">Hapus</a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
</html>


Hasil tampilannya sbb:

CRUD Data Ke Database dengan Eloquent Laravel

View

Sebelum menyiapkan controller kita buat dulu viewnya yaitu form employee_form.blade.php yang nantinya akan digunakan untuk menangani Tambah dan Ubah data.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="{{ asset('/css/app.css') }}">
        <title>{{$title}}</title>
    </head>
    <body>
        <div class="container">
            <div class="card mt-5">
                <div class="card-header text-center">
                    {{$title}}
                </div>
                <div class="card-body">
                    <a href="/employee" class="btn btn-primary">Kembali</a>
                    <br/>
                    <br/>       
                    <form method="post" action="{{url()->current()}}">
                        {{ csrf_field() }}
                        <div class="form-group">
                            <label>Nama Lengkap</label>
                            <input type="text" name="fullname" class="form-control" placeholder="Nama Lengkap .."
                            value="{{@$edit->fullname}}" >

                            @if($errors->has('fullname'))
                                <div class="text-danger">
                                    {{ $errors->first('fullname')}}
                                </div>
                            @endif

                        </div>
                            
                        <div class="form-group">
                            <label>Email</label>
                            <input type="text" name="email" class="form-control" placeholder="Email .."
                            value="{{@$edit->email}}">

                             @if($errors->has('email'))
                                <div class="text-danger">
                                    {{ $errors->first('email')}}
                                </div>
                            @endif

                        </div>
                            
                        <div class="form-group">
                            <label>Alamat</label>
                            <textarea name="address" class="form-control" placeholder="Alamat ..">{{@$edit->address}}</textarea>

                             @if($errors->has('address'))
                                <div class="text-danger">
                                    {{ $errors->first('address')}}
                                </div>
                            @endif

                        </div>

                        <div class="form-group">
                            <input name="btnSubmit" type="submit" class="btn btn-success" value="Simpan">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

Perhatikan setiap variable $edit->field_name dimulai dengan karakter @ jadi @$edit->field_name dikarenakan saat form mode create variabel tsb tidak memiliki value, untuk meng-ignore undefined variable maka saya menggunakan operator @ atau bisa menggunakan.

isset($edit->field_name)?$edit->field_name:”” tapi terlalu panjang.

Routes

Setelah form dibuat, kita akan menyiapkan route dan controllernya.

Tambahkan baris berikut pada routes/web.php

Route::match(array('GET','POST'),'employee/create', 'EmployeeController@create');
Route::match(array('GET','POST'),'employee/edit/{id}', 'EmployeeController@edit');
Route::get('/employee/delete/{id}', 'EmployeeController@delete');

Fungsi route di atas untuk menangani page Add New Employee,Edit, dan Delete.

Perhatikan baris yg berisi match(array(‘GET’,’POST’) artinya page ini bisa menangani 2 method sekaligus yaitu GET dan POST dikarenakan kita akan menggunakan GET dan POST dalam satu page.

Controller

Sekarang kita buat function create dan edit di EmployeeController.php

public function create(Request $request){
    if($request->btnSubmit){
        $this->validate($request,[
            'fullname' => 'required',
            'email' => 'required|email',
            'address' => 'required'
        ]);
 
        Employee::create([
            'fullname' => $request->fullname,
            'email' => $request->email,
            'address' => $request->address
        ]);
        return redirect('/employee');
    }
    $data['title']='Create Employee';
    return view('employee_form', $data);
}
public function edit(Request $request, $id){
    if($request->btnSubmit){
        $this->validate($request,[
            'fullname' => 'required',
            'email' => 'required|email',
            'address' => 'required'
        ]);
        $employee = Employee::find($id);
        $employee->fullname = $request->fullname;
        $employee->email = $request->email;
        $employee->address = $request->address;
        $employee->save();
        return redirect('/employee');
    }
    $data['title']='Create Employee';
    $data['edit']= Employee::find($id);
    return view('employee_form', $data);
}
public function delete($id){
    $employee = Employee::find($id);
    $employee->delete();
    return redirect('/employee');
}

Model

Tambahkan baris protected $fillable = [‘fullname’,’email’,’address’]; pada model learning_laravel/app/Employee.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Employee extends Model
{
    //
    protected $table='employees';
    
    protected $fillable = ['fullname','email','address'];
}

Bagian ini disebut juga dengan Mass Asignment pada laravel. dimana kita bisa memfilter kolum mana saja yang boleh di input, dan kolum mana saja yang tidak boleh di input. di sini kita hanya memperbolehkan penginputan nama dan alamat. yang lainnya tidak kita bolehkan.

Tetapkan nama kolum yang boleh di input dalam variabel $fillable. dan jika teman-teman ingin membuat proteksi terhadap kolum yang tidak boleh di input teman-teman bisa menuliskan nama kolum yang tidak boleh di input pada variabel $guarded.

Teman-teman bisa membaca lebih detail tentang mass asignment laravel pada dokumentasi laravel. klik di sini.

Tampilan Form Create

Tampilan Form Edit

Sementara Link Delete Pada View Employee digunakan untuk menghapus Row yang dipilih

Untuk lebih mempercantik lagi tambahkan fitur Paging dan Search

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>