Step By Step Tutorial Laravel Lengkap Cara Membuat Aplikasi CRUD Dengan Laravel 7

Tutorial membuat CRUD dengan Laravel 7 – Halo, pada seri tutorial Laravel kali ini, JogjaTech.com akan menyuguhkan seri tutorial lengkap membuat CRUD dengan Laravel 7 dari awal serta menggunakan Modals Boostrap, kita akan belajar basic sampai membuat aplikasi CRUD sederhana dengan Laravel 7. Tutorial CRUD Laravel 7 lengkap ini akan dimulai dari tahap dasar, seperti menyiapkan project Laravel 7 dari tahap instalasi project, kebutuhan web server yang harus dipenuhi, kemudian menghubungkan project CRUD Laravel 7 dengan database, lalu membuat database, hingga mengolah data dengan teknik CRUD di Laravel 7.

Secara tahapan tutorial lengkap step by step membuat CRUD dengan Laravel 7 ini akan dibagi ke dalam 15 pembahasan. 15 pembahasan cara membuat CRUD dengan Laravel 7 tersebut akan diurai menjadi seperti berikut :

1. Kebutuhan web server yang harus dipenuhi saat menggunakan Laravel 7

2. Melakukan Instalasi Project Laravel 7 Pada Web Server

3. Menghubungkan Project Laravel 7 ke Database MySQL

4. Migrasi Pertama Pada Project Laravel 7

5. Membuat Login Auth Scaffolding di Laravel 7

6. Mempersiapkan Database Tabel Pegawai

7. Membuat Database Seeder dan Data Fake Pegawai di Laravel 7

8. Membuat Controller Pada Project Laravel 7

9. Membuat Model Pada Project Laravel 7 Dan Menggunakannya

10. Routing di Laravel 7

11. Membuat CRUD dengan Laravel 7

12. Menampilkan Data Ke Dalam View Laravel 7 (Read)

13. Melakukan Input Data ke Database MySQL dengan Laravel 7 (Create)

14. Melakukan Edit Data dengan Laravel 7 (Update)

15. Menghapus Data di Laravel 7 (Delete)

Oke langsung saja kita mulai tentang 15 cara membuat CRUD dengan Laravel 7 seperti berikut, yuk lanjut bacanya.

Sejak dirilis tahun 2011 lalu, framework Laravel terus tumbuh berkembang dan menjadi salah satu framework dari sekian banyak framework PHP yang banyak diminati oleh para developer professional maupun beginner. Hal ini karena Laravel sendiri selalu up to date mengalami perkembangan versi yang begitu cepat, juga yang tak kalah penting adalah Laravel selalu menyertai dengan dokumentasi yang lengkap pada setiap seri nya.

Nah, lalu apa saja sih syarat yang harus dipenuhi pada web server agar bisa menginstall framework Laravel versi 7. Sebagaimana tertera pada website resminya laravel.com, untuk dapat menggunakan Laravel 7, maka syarat pertama adalah dibutuhkan minimal PHP 7.2*, jadi jika pada sebelumnya anda menggunakan versi PHP dibawah PHP 7.2* maka saya sarankan Anda mengupgrade web server Anda. Kemudian pastikan juga pada web server anda telah mengaktifkan ekstensi seperti BCMath PHP Extension, Ctype PHP Extension, Fileinfo PHP extension, JSON PHP Extension, Mbstring PHP Extension, OpenSSL PHP Extension, PDO PHP Extension, Tokenizer PHP Extension, XML PHP Extension.

Untuk memastikan komputer anda telah terinstal PHP versi 7.2* atau belum, silahkan lakukan pengecekan melalui jendela Terminal/ Command Prompt dengan menjalankan perintah berikut :

php -v

2. Melakukan Instalasi Laravel 7 Pada Web Server

Instalasi framework Laravel dapat dilakukan melalui composer, dan pastikan Anda menginstal project Laravel 7 pada directory  “www” jika menggunakan WAMPSERVER sebagai web server nya, dan meletakkan project Laravel 7 pada directory  “htdocs” jika menggunakan XAMPP sebagai web server nya, mudah bukan?

Lalu untuk memastikan apakah composer telah terinstal dengan baik di PC Anda, silahkan lakukan cek melalui jendela Terminal/ Command Prompt dan jalankan perintah berikut:

compser -v

Lalu untuk menginstal project Laravel 7 untuk kepentingan CRUD application dapat dilakukan melalui composer dengan menjalankan perintah berikut :

composer create-project --prefer-dist laravel/laravel namaproject

Dalam membuat tutorial cara membuat aplikasi CRUD dengan Laravel 7 ini, saya menggunakan Windows 10 sebagai OS nya dan menggunakan WAMPSERVER sebagai web server nya, sehingga proses instalasi project CRUD apllication Laravel 7dapat dilihat pada gambar berikut :

Nikmatilah proses instalasi hingga selesai sempurna. Dan pastikan Anda menjalankan proses instalasi sampai selesai, sehingga menciptakan application key seperti berikut :

Lalu untuk memastikan apakah project Laravel 7 telah berhasil terinstal dengan sempurna pada web server, kita bisa menjalankan project Laravel 7 yang baru saja kita install dengan mengetikkan perintah berikut pada jendela Terminal/ Command Prompt. 

php artisan serve

Kemudian buka web browser dan jalankan url localhost:8000, jika berjalan dengan baik maka Anda akan disambut dengan halaman berikut :

Untuk melihat versi Laravel yang terinstal pada web server, Anda bisa menjalankan perintah artisan berikut ini pada jendela Terminal/ Command Prompt, dengan perintah change directory (cd) arahkan pada project Laravel lalu jalankan perintah berikut :

php artisan -v

Jika berjalan dengan baik maka akan ditampilkan versi framework Laravel seperti berikut :

3. Menghubungkan Project Laravel 7 ke Database MySQL

Jika Anda memulai Laravel 7 dengan project baru, maka instalasi yang berjalan secara otomatis membuat file env pada core project dimana file ini digunakan untuk meng-configurasi database.

Menghubungkan project CRUD Laravel 7 dengan database MySQL tidak lah sulit. Di Laravel sendiri ada dua cara untuk melakukan konfigurasi database. Menghubungkan project Laravel 7 ke database MySQL dapat dilakukan dengan dua cara yaitu, selain melalui file .env, Anda juga bisa meng-konfigurasi database laravel melalui file “config/database.php”. Disini saya akan menggunakan file .env untuk menghubungkan database, dan menggunakan database dengan nama “laravel7com”, sehingga tampak seperti contoh berikut :

 

4. Migrasi Pertama Pada Project Laravel 7

Melakukan migrasi pertama kali pada project Laravel 7 dengan menjalankan perintah artisan migrate. Dengan melakukan migrasi pertama kali pada project Laravel maka sekaligus kita menguji apakah project Laravel 7 kita benar-benar terhubung ke database MySQL.

Untuk melakukan tes apakah konfigurasi database benar-benar berhasil dapat dijalankan, mari jalankan perintah artisan migrate berikut :

php artisan migrate

Jika konfigurasi project Laravel 7 dengan database MySQL berjalan dengan baik, maka proses migrasi akan berjalan dengan baik.

Dimana perintah migrate tersebut akan menciptakan beberapa tabel di database, seperti tabel users dan lainnya. Seperti tampak pada database project laravel kita seperti berikut :

Saat pertama kali melakukan migrasi dengan perintah artisan php artisan migrate, bisa saja terjadi error.

Jika mengalami error seperti disini jangan kuatir kita bisa menyelesaikannya dengan cara melakukan sedikit perubahan pada file migrations file “…_create_users_table.php” dengan menambahkan angka panjang string misalkan 250 pada folder “database/migrations/…_create_users_table.php” seperti berikut :

Jangan lupa menghapus tabel yang tercipta tidak sempurna pada database dengan perintah php artisan migrate:rollback, lalu menjalankan kembali printah php artisan migrate. 

5. Membuat Login Auth Scaffolding di Laravel 7

Sebagai salah satu freamework PHP yang banyak diminati developer, Laravel 7 memberikan kemudahan bagi penggunanya, Laravel telah menyiapkan beberapa paket yang bisa digunakan untuk menciptakan auth login scaffolding. Hal ini memudahkan developer saat pertama kali membangun aplikasi yang membutuhkan halaman front-end dan back-end. Untuk menggunakannya pertama Anda perlu meginstallnya dengan perintah composer berikut :

composer require laravel/ui

Kemudian jalankan perintah artisan berikut, untuk menciptakan route, controllers, views, dan files lainnya yang dibutuhkan untuk menerapkan login auth laravel.

php artisan ui vue --auth

Selanjutnya, anda perlu mengcompile file UI CSS dengan menjalankan perintah berikut :

npm install && npm run dev

Nikmatilah proses instalasi sampai selesai dengan ditandai pesan seperti “DONE Compiled successfully in…” seperti berikut :

Jika langkah diatas sudah kita jalankan, maka saatnya kita tes menjalankan project Laravel kita dengan menjalankan perintah artisan berikut melalui jendela Terminal/ Command Prompt :

php artisan serve

Lalu buka browser Anda dan jalankan url localhost:8000, jika berjalan dengan baik, maka akan dijumpai tombol menu Login dan Register pada halaman front-end project Laravel Anda, seperti contoh berikut :

Anda bisa mencoba dengan mendaftar kan satu akun user melalui menu register seperti berikut :

Jika pendaftaran akun user berhasil dilakukan, maka secara otomatis Laravel akan meredirect ke halaman dashboard back-end aplikasi project Laravel Anda. Seperti tampak berikut :

Selanjutnya Anda bisa melakukan administrasi database dengan meng-klik tombol login. 

6. Mempersiapkan Database Tabel Pegawai

Mengolah data di project Laravel 7 CRUD application berarti kita bermain-main dengan yang namanya database, pada database itu sendiri kita bisa membuat bermacam-macam tabel sesuai kebutuhan project yang Anda kerjakan. Membuat tabel pada project Laravel bisa menggunakan perintah artisan dan migrations.

Buka jendela Terminal/ Command Prompt, dengan perintah change directory (cd) arahkan ke folder project Laravel lalu buatlah model Pegawai dan file migrationnya dengan menjalankan perintah artisan berikut :

php artisan make:model Pegawai --migration

Jika perintah artisan diatas dijalankan maka akan menciptakan sebuah file Model “Pegawai.php” pada folder “App/Pegawai.php”, dan file pegawai migrations pada folder “database/migrations”, seperti pada gambar berikut :

Langkah selanjutnya buka file migration nya lalu kita lakukan sedikit modifikasi dengan menambahkan beberapa potongan kode yang berguna membentuk field pada di table pegawai, pada function up() tambahkan seperti berikut :

public function up() {
Schema::create('pegawais', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('email');
$table->string('job');
$table->string('address');
$table->timestamps();
});
}

Sehingga secara lengkap file migration pegawai akan seperti berikut :

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePegawaisTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('pegawais', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('email');
$table->string('job');
$table->string('address');
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('pegawais');
}
}

Lalu untuk menciptakan tabel pegawai melalui file migration diatas, maka dapat dilakukan dengan menjalankan perintah artisan berikut melalui jendela Terminal/ Command Prompt :

php artisan migrate

Jika berjalan dengan baik, maka akan kita jumpai satu tambahan tabel lagi pada database dengan nama “pegawais”, seperti tampak berikut :

7. Membuat Database Seeder dan Data Fake Pegawai di Laravel 7

Untuk kepentian development aplikasi biasanya para developer menggunakan data fake (data palsu) untuk mengisi data pada table database aplikasi mereka. Begitu juga saya, disini akan menggunakan data fake untuk mengisi kekosongan data pada database tabel “pegawais”.

Lalu bagaimana cara mengisi data fake dengan Laravel? Nah untuk mengisi data fake pada Laravel disini saya memanfaatkan database seeder serta library Faker. Langsung saja, langkah pertama adalah kita buatkan database seedernya terlebih dahulu, buka jendela Terminal/ Command Prompt lalu jalankan perintah membuat database seeder berikut :

php artisan make:seeder PegawaiSeeder

Perintah diatas jika dijalankan maka akan membuat sebuah file seeder dengan nama “PegawaiSeeder.php” pada folder “database/seeds/PegawaiSeeder.php”, seperti pada gambar berikut.

Lalu kita gunakan Faker untuk menciptakan data fake pegawai. Perlu diketahui bahwa, Faker adalah library open-source yang dibuat oleh Francois Zaninotto, yang berguna untuk membuat data fake atau data palsu untuk kepentingan ujicoba atau testing aplikasi. Faker mampu meng-generate ratusan bahkan ribuan data palsu untuk kegunaan data testing.

Untuk dapat menggunakan library Faker, maka langkah pertama adalah melakukan instalasi library Faker pada project laravel terlebih dahulu, melalui jendela Terminal/ Command Prompt jalankan perintah instalasi berikut :

composer require fzaninotto/faker

Sambil menyeruput secangkir kopi 🙂 kita tunggu hingga proses instalasi selesai dengan sempurna.

Jika sudah, sekarang kita lakukan modifikasi file seedernya “PegawaiSeeder.php” menjadi seperti berikut :

<?php

use Illuminate\Database\Seeder;
use Faker\Factory as Faker;

class PegawaiSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
$faker = Faker::create('id_ID');

for($i=1; $i <= 50; $i++){
DB::table('pegawais')->insert([
'name' => $faker->name,
'email' => $faker->email,
'job' => $faker->jobTitle,
'address' => $faker->address
]);
}
}

}

Kemudian kita jalankan seedernya melalui jendele Terminal/ Command Prompt seperti berikut :

php artisan db:seed --class=PegawaiSeeder

Maka Faker akan menggenerate data fake sebanyak perulangan yang kita buat. Jika kita cek di database tabel “pegawais” maka akan kita jumpai data fake seperti pada gambar berikut :

8. Membuat Controller Pada Project CRUD Laravel 7

Controller pada Laravel digunakan untuk mengambil permintaan, memparsing permintaan, menginisialisasi, memanggil model yang diperlukan, mengambil respon dan mengirimkannya ke dalam view.

Membuat controller dapat dilakukan dengan menjalankan perintah artisan pada jendela Terminal/ Command Prompt, dengan perintah change directory (cd) arahkan pada project Laravel Anda lalu jalankan perintah artisan berikut :

php artisan make:controller PegawaiController –resource

Jika perintah artisan diatas kita jalankan maka akan meng-generate satu buah controller “PegawaiController.php”.

9. Membuat Model Pada Project CRUD Laravel 7 Dan Menggunakannya

Model pada Laravel digunakan untuk mengolah data. Model pada Laravel dapat kita gunakan sebagai peran untuk menyimpan, mengambil, mengubah, dan menghapus data pada database. Lalu bagaimana caranya membuat model pada Laravel? Caranya cukup mudah, membuat model pada Laravel dapat dilakukan secara manual dan meletakkannya pada folder “App”, akan tetapi akan lebih mudah jika kita membuatnya dengan perintah artisan melalui jendela Terminal/ Command Prompt.

Membuat model di Laravel melalui jendela Terminal/ Command Prompt dapat dilakukan dengan menjalankan perintah artisan berikut :

php artisan make:model Pegawai

Dengan menjalan perintah diatas, file model kita akan tergenerate secara otomatis. Akan tetapi pada project ini kita telah menciptakan model Pegawai.php pada pembahasan point 6 (enam) diatas, sehingga kita tidak perlu lagi menciptakan model Pegawai.php lagi.

Lalu bagaimana kita menggunakan model untuk pengolahan data pada project Laravel? Menggunakan model pada project Laravel dapat dilakukan dengan memanggil nama model yang diperlukan pada controller, pemanggilan model pada controller dilakukan dengan menambahkan kode seperti Use App\Namamodel; atau Use App\Namamodel as Namaalias;

10. Routing di Laravel 7

Penggunaan routing pada Laravel adalah sebuah proses mengatur lalu lintas seperti pengiriman data maunpun informasi ke pengguna melalui sebuah request, lalu alamat tersebut akan memproses dari permintaan yang kita lakukan, dan mengembalikannya ke sebuah output atau hasil dari proses tersebut.

Nah didalam project CRUD Laravel 7 kita disana dapat kita jumpai folder bernama “routes”. Dimana terdapat beberapa file, salah satunya diantaranya adalah file bernama “web.php”, nah pada file inilah kita dapat menggunakannya untuk mebuat routing web yang kita perlukan. Dan disini saya meregisterkan routing sesuai kebutuhan saja, seperti berikut :

Route::get('/pegawai', 'PegawaiController@index')->name('pegawai.index');
Route::get('/pegawai/getdata', 'PegawaiController@getData')->name('pegawai.getdata');
Route::post('/pegawai/simpan', 'PegawaiController@store')->name('pegawai.simpan');
Route::get('/pegawai/edit', 'PegawaiController@edit')->name('pegawai.edit');
Route::post('/pegawai/hapus/{id}', 'PegawaiController@destroy')->name('pegawai.hapus');

11. Membuat CRUD dengan Laravel 7

CRUD pada Laravel adalah sebuah istilah operasi olah data. Istilah CRUD di Laravel merupakan singkatan dari operasi Create, Read, Update, dan Delete. Operasi CRUD di tutorial Laravel kali ini akan bermain-main dengan data pegawai, teman-teman bisa mempraktikkannya dengan data lainnya.

12. Menampilkan Data Ke Dalam View Laravel 7 (Read)

Mengolah data dengan menampilkannya ke view project Laravel bisa mengkombinasikan dengan library yajra datatable sehingga mempermudah bagi developer dalam hal menampilkan data ke view dalam bentuk datatable dengan disertai fitur seperti pencarian, shorting data, dan pagination.

Library Laravel bernama yajra datatables ini dikembangkan oleh developer berkebangsaan Filipina bernama Arjay Angeles. Menggunakan Yajra Datatables memberikan kemudahan development dalam urusan pemanggilan data kedalam data table yang disertai fitur pencarian, shorting data, dan pagination. Sehingga developer tidak perlu repot-repot lagi membuat secara manual dengan mengetikkan kebutuhan kode.

Untuk menggunakan library datatables bernama Yajra ini developer hanya perlu melakukan instalasi library ini pada project Laravel nya, dan disusul dengan sedikit konfigurasi serta pemanggilan untuk menggunakannya, terlihat mudah bukan?

Melakukan instalasi library yajra datatables pada Laravel dapat dilakukan melalui jendela Terminal/Command Prompt, lalu dengan perintah change directory (CD) arahkan pada project Laravel Anda, kemudian ketikan dan jalankan perintah composer berikut ini :

composer require yajra/laravel-datatables-oracle

Nimatilah proses instalasi hingga selesai dengan sempurna sambil menyeruput secangkir kopi 🙂 . Setelah proses instalasi package datatables selesai dengan sempurna, langkah selanjutnya adalah kita melakukan konfigurasi datatables pada project Laravel kita agar bisa kita gunakan.

Melakukan Konfigurasi Datatable Pada Framework Laravel

Melakukan konfigurasi Yajra datatable pada project Laravel 7 CRUD application adalah sebuah langkah agar library tersebut dapat dikenali, konfigurasi Yajra datatables langkahnya cukup mudah, pengguna hanya perlu mendaftarkan pada provider dan facade pada project Laravel pada file “config/app.php”. Nah sekarang buka file “app.php” pada folder “config/app.php” lalu tambahkan dua baris kode berikut pada block provider dan aliases, sehingga tampak seperti contoh berikut :

‘providers’ => [

    …,

    Yajra\DataTables\DataTablesServiceProvider::class,

]

‘aliases’ => [

    …,

    ‘Datatables’ => Yajra\DataTables\Facades\DataTables::class,

]

Proses konfigurasi telah dilakukan, tahap selanjutnya yang perlu dilakukan oleh developer adalah memanggilnya pada file controller, proses pemanggilan Yajra datatables pada controller dapat dilakukan dengan menambahkan kode use Datatables; pada setiap controller yang akan menggunakannya.

Untuk kebutuhan menampilkan data dari database ke view project Laravel dengan memanfaatkan library Yajra datatable dapat dilakukan dengan menambahkan method pada controller “PegawaiController.php” lalu buatkan sebuah method dengan nama sesuai kebutuhan, seperti contoh berikut :

public function getData()
{
return Datatables::of(Pegawai::all())->make(true);
}

Nah kode diatas akan meng-generate data dalam bentuk format Json.

Lalu tidak ketinggalan dengan routingnya. Kembali pada pembahasan routing Laravel, pada routing di folder “routes/web.php” saya telah menyertakan routing untuk menampilkan data json dengan alamat berikut :

Route::get('/pegawai/getdata', 'PegawaiController@getData')->name('pegawai.getdata');

Sekarang jalankan project Laravel Anda, lalu pada browser akses url berikut :

localhost:8000/pegawai/getdata

Jika berjalan dengan baik maka akan ditampilkan halaman berupa data dalam bentuk format json seperti berikut :

Data dalam format Json telah berhasil kita tampilkan, langkah selanjutnya adalah menampilkan data tersebut ke dalam view.

Menampilkan Data Json Dalam View Datatable Laravel

Buatlah sebuah file view “pegawai.blade.php” pada folder “resources/views/pegawai.blade.php”. Lalu untuk melengkapi file jquery maupun css datatables, maka kita perlu melakukan sedikit modifikasi pada file “app.blade.php” yang terletak pada folder “resources/views/layouts/app.blade.php”, bukalah file tersebut lalu tambahkan kode untuk memanggil library jQuery datatables beserta file pendukungnya sehingga menjadi seperti berikut :

app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<title>{{ config('app.name', 'Laravel') }}</title>

<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

<!-- Styles -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light bg-red shadow-sm">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">

</ul>

<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>

<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
</div>
</div>
</nav>

<main class="py-4">
@yield('content')
</main>
</div>
@stack('scripts')
</body>
</html>

Kemudian buka file view “pegawai.blade.php” yang telah kita buat pada folder “resources/views/pegawai.blade.php”, lalu modifikasi dan tambahkan kode sehingga menjadi seperti berikut:

pegawai.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">Data Pegawai
<button class="btn btn-success btn-sm btn-flat pull-right" data-toggle="modal" data-target="#modal-add"><i class="fa fa-plus"></i>Tambah</button>
</div>
@if($message = Session::get('status'))
<div class="alert alert-success alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<p>{{$message}}</p>
</div>
@endif
<div class="card-body">
<table id="tbl_list" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Job</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Form Data Pegawai</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form name="frm_add" id="frm_add" class="form-horizontal" action="{{route('pegawai.simpan')}}" method="POST" enctype="multipart/form-data">
@csrf
<div class="modal-body">
<div class="form-group"><label class="col-lg-3 control-label">Name</label>
<div class="col-lg-12">
<input type="text" name="name" placeholder="Name" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Email</label>
<div class="col-lg-12">
<input type="email" name="email" placeholder="Email" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Job</label>
<div class="col-lg-12">
<input type="text" name="job" placeholder="Job" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Address</label>
<div class="col-lg-12">
<textarea name="address" class="form-control"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="idpegawai">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }});
$('#tbl_list').DataTable({
"aLengthMenu": [
[10, 25, 50, 100, 200, -1],
[10, 25, 50, 100, 200, "All"]
],
paging: true,
processing: true,
serverSide: true,
ajax: '{{ url('pegawai/getdata') }}',
type: "POST",
columns: [
{ data: 'id'},
{ data: 'name'},
{ data: 'email'},
{ data: 'job'},
{ data: 'address'},
{ data: "id",
render: function (data, type, row ) {
return '<button type="button" class="btn btn-xs btn-success edit" data-id="'+data+'"><small>Edit</small></button>'+
'<button type="button" class="btn btn-xs btn-danger hapus" id-hapus="'+data+'"><small>Hapus</small></button>';
}, sClass: "text-center", searchable: false
}
],

"drawCallback": function(settings, json) {
$('.edit').off("click").on("click",function() {
var cek = $(this).attr('data-id');
$.ajax({
url : "{{route('pegawai.edit')}}?id="+cek,
type: "GET",
dataType: "JSON",
success: function(data)
{
$("#frm_add").find("input[name=idpegawai]").val(data.id);
$("#frm_add").find("input[name=name]").val(data.name);
$("#frm_add").find("input[name=email]").val(data.email);
$("#frm_add").find("input[name=job]").val(data.job);
$("#frm_add").find("textarea[name=address]").val(data.address);
$("#exampleModalLabel").text("Form Edit Pegawai");
$('#modal-add').modal('show');
}
});
});

$('.hapus').off("click").on("click",function() {
var cek = $(this).attr('id-hapus');
$.ajax({
url : "{{url('pegawai/hapus')}}/"+cek,
type: "POST",
success: function(data)
{
window.location ="{{route('pegawai.index')}}";
}
});
});
},
});

});
</script>
@endpush

Lalu sedikit kembali lagi kepada routing Laravel, disana saya telah menyertakan alamat routing untuk menampilkan data, dengan alamat seperti berikut :

Route::get('/pegawai', 'PegawaiController@index')->name('pegawai.index');

Sedangkan untuk controller nya saya menambahkan sebuah method seperti berikut :

public function index() {
return view('pegawai');
}

Nah sampai tahap ini kita telah melakukan semua syarat yang dibutuhkan untuk menampilkan data dalam bentuk datatables. Saatnya kita lakukan tes, jalankan project Laravel Anda, lalu buka browser dan jalankan url berikut :

localhost:8000/pegawai

Jika berjalan dengan baik, maka akan ditampilkan halaman dengan menampilkan data ke dalam bentuk datatable seperti berikut :

13. Melakukan Input Data ke Database MySQL dengan Laravel 7 (Create)

Masih dalam pembahasan operasi CRUD pada project aplikasi dengan Laravel 7, disini kita masih bermain-main dengan database dan tabel dalam mengolah data, olah data kali ini akan melakukan input dat melalui form lalu dikirim ke database.

Menginput data di Laravel melalui sebuah form dapat kita lakukan dengan beberapa langkah, pertama yaitu kita membuatkan routing nya dulu. Lagi-lagi kembali pada pembahasan routing di Laravel, disana saya telah menyertakan routing untuk menyimpan data dengan alamat berikut :

Route::post('/pegawai/simpan', 'PegawaiController@store')->name('pegawai.simpan');

Kemudian jika kita perhatikan file view “pegawai.blade.php” dengan seksama, disana saya menyertakan form bootstrap modal untuk kegunaan tampilan form input data pegawai nya. Sehingga saya tidak perlu lagi membuat sebuah routing untuk memanggil form nya.

Sedangkan kebutuhan controller nya disini saya menambahkan method simpan data seperti berikut :

public function store(Request $request)
{
$data=array(
'name' => $request->input('name'),
'email' => $request->post('email'),
'job' => $request->post('job'),
'address'=> $request->post('address')
);
if($request->input('idpegawai')==''){
DB::table('pegawais')->insert($data);
}else{
DB::table('pegawais')->where('id','=',$request->post('idpegawai'))->update($data);
}
return redirect()->route('pegawai.index');
}

Jika berjalan dengan baik, maka saat kita klik tombol “Tambah” maka akan ditampilkan form input pegawai seperti tampak pada gambar berikut ini, dan jika kita isi field form nya lalu kita klik tombol simpan maka data akan diproses melalui routing “pegawai.simpan”.

14. Melakukan Edit Data dengan Laravel 7 (Update)

Melakukan operasi edit data pada project CRUD Laravel 7 yang kita jalankan ini memerlukan beberapa tahapan, pertama yang perlu kita lakukan adalah menampilkan data yang akan kita edit ke dalam form edit. Sekali lagi mari kita perhatikan kembali pada form bootstrap modal yang berada pada file view “pegawai.blade.php”. Dalam hal kebutuhan edit data disini saya juga memanfaatkan form modal bootstrap yang sudah ada pada file view “pegawai.blade.php” tersebut. Data saya panggil dalam bentuk format json kemudian ditampilkan kedalam field form dengan membaca tag name nya, seperti berikut :

public function edit(Request $request)
{
$data = Pegawai::findOrFail($request->get('id'));
echo json_encode($data);
}

Diatas adalah sebuah method edit pada controller “PegawaiController.php” dan menggenerate data dalam bentuk json, dan berikut adalah html form Modals Boostrap beserta tag name nya.

<!-- Modal -->
<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Form Data Pegawai</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form name="frm_add" id="frm_add" class="form-horizontal" action="{{route('pegawai.simpan')}}" method="POST" enctype="multipart/form-data">
@csrf
<div class="modal-body">
<div class="form-group"><label class="col-lg-3 control-label">Name</label>
<div class="col-lg-12">
<input type="text" name="name" placeholder="Name" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Email</label>
<div class="col-lg-12">
<input type="email" name="email" placeholder="Email" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Job</label>
<div class="col-lg-12">
<input type="text" name="job" placeholder="Job" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Address</label>
<div class="col-lg-12">
<textarea name="address" class="form-control"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="idpegawai">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>

Dan berikut adalah javascript nya guna proses mengirimkan data ke dalam form dengan membaca tag yang disesuaikan.

$('.edit').off("click").on("click",function() {
var cek = $(this).attr('data-id');
$.ajax({
url : "{{route('pegawai.edit')}}?id="+cek,
type: "GET",
dataType: "JSON",
success: function(data)
{
$("#frm_add").find("input[name=idpegawai]").val(data.id);
$("#frm_add").find("input[name=name]").val(data.name);
$("#frm_add").find("input[name=email]").val(data.email);
$("#frm_add").find("input[name=job]").val(data.job);
$("#frm_add").find("textarea[name=address]").val(data.address);
$("#exampleModalLabel").text("Form Edit Pegawai");
$('#modal-add').modal('show');
}
});
});

Tidak lupa kita bahas juga urusan routing nya. Untuk keperluan update data disini routingnya saya satukan dengan routing menyimpan data yaitu routing “pegawai.simpan”.

Jika kita perhatikan baik-baik pada method controller pada function strore(), saat mengirim data disana saya filter dengan pemisalan if (jika), jika request pada if kosong maka dianggap mengirim data baru, dan jika request pada if tidak sama dengan kosong maka dianggap mengupdate data sesuai id yang dikirim adapun data id disini pada form namenya saya beri nama “idpegawai”, coba perhatikan kembali form modal pada file view “pegawai.blade.php”.

15. Menghapus Data di Laravel 7 (Delete)

Tahap akhir dari pembahasan operasi CRUD Laravel 7 ini adalah melakukan hapus data atau disebut dengan proses Delete. Kembali lagi pada routing Laravel, disana saya telah menyertakan routing untuk hapus data dengan alamat berikut :

Route::post('/pegawai/hapus', 'PegawaiController@destroy')->name('pegawai.hapus');

Perhatikan lagi pada file view “pegawai.blade.php” disana saya telah menyertakan dua buah tombol button, yaitu tombol edit dan tombol hapus. Dimana tombol edit sudah kita bahas untuk fungsi melakukan edit data, dan tombol hapus disini akan kita gunakan untuk menjalankan fungsi penghapusan data.

Adapun method untuk menghapus pada controller “PegawaiController.php” akan seperti berikut :

public function destroy($id) {
DB::table('pegawais')->where('id', '=', $id)->delete();
}

Kemudian proses pada javascriptnya yang kita letakkan pada file view “pegawai.blade.php” adalah seperti berikut :

$('.hapus').off("click").on("click",function() {
var cek = $(this).attr('id-hapus');
$.ajax({
url : "{{url('pegawai/hapus')}}/"+cek,
type: "POST",
success: function(data)
{
window.location ="{{route('pegawai.index')}}";
}
});
});

Sehingga keseluruhan kode pada file view “pegawai.blade.php” adalah seperti berikut :

@extends('layouts.app')

@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-header">Data Pegawai
<button class="btn btn-success btn-sm btn-flat pull-right" data-toggle="modal" data-target="#modal-add"><i class="fa fa-plus"></i>Tambah</button>
</div>
@if($message = Session::get('status'))
<div class="alert alert-success alert-dismissable">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<p>{{$message}}</p>
</div>
@endif
<div class="card-body">
<table id="tbl_list" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Job</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modal-add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Form Data Pegawai</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form name="frm_add" id="frm_add" class="form-horizontal" action="{{route('pegawai.simpan')}}" method="POST" enctype="multipart/form-data">
@csrf
<div class="modal-body">
<div class="form-group"><label class="col-lg-3 control-label">Name</label>
<div class="col-lg-12">
<input type="text" name="name" placeholder="Name" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Email</label>
<div class="col-lg-12">
<input type="email" name="email" placeholder="Email" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Job</label>
<div class="col-lg-12">
<input type="text" name="job" placeholder="Job" class="form-control">
</div>
</div>
<div class="form-group"><label class="col-lg-3 control-label">Address</label>
<div class="col-lg-12">
<textarea name="address" class="form-control"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="idpegawai">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Simpan</button>
</div>
</form>
</div>
</div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }});
$('#tbl_list').DataTable({
"aLengthMenu": [
[10, 25, 50, 100, 200, -1],
[10, 25, 50, 100, 200, "All"]
],
paging: true,
processing: true,
serverSide: true,
ajax: '{{ url('pegawai/getdata') }}',
type: "POST",
columns: [
{ data: 'id'},
{ data: 'name'},
{ data: 'email'},
{ data: 'job'},
{ data: 'address'},
{ data: "id",
render: function (data, type, row ) {
return '<button type="button" class="btn btn-xs btn-success edit" data-id="'+data+'"><small>Edit</small></button>'+
'<button type="button" class="btn btn-xs btn-danger hapus" id-hapus="'+data+'"><small>Hapus</small></button>';
}, sClass: "text-center", searchable: false
}
],

"drawCallback": function(settings, json) {
$('.edit').off("click").on("click",function() {
var cek = $(this).attr('data-id');
$.ajax({
url : "{{route('pegawai.edit')}}?id="+cek,
type: "GET",
dataType: "JSON",
success: function(data)
{
$("#frm_add").find("input[name=idpegawai]").val(data.id);
$("#frm_add").find("input[name=name]").val(data.name);
$("#frm_add").find("input[name=email]").val(data.email);
$("#frm_add").find("input[name=job]").val(data.job);
$("#frm_add").find("textarea[name=address]").val(data.address);
$("#exampleModalLabel").text("Form Edit Pegawai");
$('#modal-add').modal('show');
}
});
});

$('.hapus').off("click").on("click",function() {
var cek = $(this).attr('id-hapus');
$.ajax({
url : "{{url('pegawai/hapus')}}/"+cek,
type: "POST",
success: function(data)
{
window.location ="{{route('pegawai.index')}}";
}
});
});
},
});

});
</script>
@endpush

Dan seluruh kebutuhan method pada controller “PegawaiController.php” pada operasi CRUD Application data pegawai dengan Laravel 7 kali ini adalah seperti berikut :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use App\Pegawai;
use Datatables; //pemanggilan datatable dalam sebuah controller

class PegawaiController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('pegawai');
}

public function getData()
{
return Datatables::of(Pegawai::all())->make(true);
}

/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$data=array(
'name' => $request->input('name'),
'email' => $request->post('email'),
'job' => $request->post('job'),
'address'=> $request->post('address')
);
if($request->input('idpegawai')==''){
DB::table('pegawais')->insert($data);
}else{
DB::table('pegawais')->where('id','=',$request->post('idpegawai'))->update($data);
}
return redirect()->route('pegawai.index');
}

/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit(Request $request)
{
$data = Pegawai::findOrFail($request->get('id'));
echo json_encode($data);
}

/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
DB::table('pegawais')->where('id', '=', $id)->delete();
}
}

Lalu routingnya secara lengkap seperti berikut :

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
Route::get('/pegawai', 'PegawaiController@index')->name('pegawai.index');
Route::get('/pegawai/getdata', 'PegawaiController@getData')->name('pegawai.getdata');
Route::post('/pegawai/simpan', 'PegawaiController@store')->name('pegawai.simpan');
Route::get('/pegawai/edit', 'PegawaiController@edit')->name('pegawai.edit');
Route::post('/pegawai/hapus/{id}', 'PegawaiController@destroy')->name('pegawai.hapus');

Kesimpulan :

Dengan menyelesaikan tahapan demi tahapan pada tutorial membuat CRUD Application data pegawai dengan Laravel 7 pada  judul pembahasan “Step By Step Tutorial Laravel Lengkap Cara Membuat Aplikasi CRUD Dengan Laravel 7” ini, maka kita telah belajar dan berhasil menyelesaikan project Laravel sederhana yaitu membuat operasi CRUD Application sederhana menggunakan framework Laravel 7. Kata akhir semoga tutorial Laravel 7 CRUD Application Example data pegawai yang sangat sederhana ini dapat membantu dan memberi manfaat bagi siapa saja yang membutuhkan. Kritik dan saran yang membangun dapat melengkapi kekurangan yang ada disini. Pada akhirnya saya memohon maaf jika terdapat kekurangan disana-sini. Terimakasih… and happy coding 🙂