4. Membuat Migrasi Tabel Pegawai
Tutorial contoh aplikasi CRUD kali ini saya akan mengolah data pegawai, sehingga kita perlu menyiapkannya, biasanya kita membuat tabel di MySQL langsung kita eksekusi pada phpmyadmin, nah pada tutorial ini untuk pembuatan tabel pegawai kita akan menggunakan database migrations nya Laravel, jalankan perintah artisan berikut pada Terminal/ Command Prompt :
php artisan make:migration create_pegawais_table --create=pegawais
Perintah artisan diatas dimaksud untuk menciptakan database migration, jalankan maka akan kita jumpai satu file tambahan pada folder “database/migrations” seperti ….create_pegawais_table.php, untuk menciptakan tabel maka kita perlu memodifikasi file migration dengan menambahkan beberapa potongan code, buka file migration tersebut lalu tambahkan beberapa potongan code seperti berikut :
public function up()
{
Schema::create('pegawais', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->date('birthday');
$table->string('email');
$table->string('job');
$table->string('address');
$table->timestamps();
});
}
Sekarang database migration tabel pegawai siap dijalankan, masih aktif pada jendela Terminal/ Command Prompt lalu jalankan perintah artisan berikut :
php artisan migrate
Jika berjalan dengan baik, maka kita akan menjumpai satu buah tabel tambahan dengan nama “pegawais” pada database MySQL project Laravel 7 Anda.
5. Membuat Routing
Disini saya menambahkan menambahkan beberapa baris route pada folder “routes/web.php”, seperti berikut :
Route::get('/pegawai', 'PegawaiController@index')->name('pegawai.index');
Route::get('/pegawai/datatable', 'PegawaiController@datatable')->name('pegawai.datatable');
Route::post('/pegawai/store', 'PegawaiController@store')->name('pegawai.store');
Route::get('/pegawai/edit', 'PegawaiController@edit')->name('pegawai.edit');
Route::post('/pegawai/destroy/{id}', 'PegawaiController@destroy');
Routing tersebut akan kita gunakan untuk menghandel operasi CRUD data pegawai.
6. Menambahkan Controller dan Model pada project
Pada tahap ini saya akan menambahkan sebuah controller dengan nama “PegawaiController.php” dan juga saya akan menambahkan modal dengan nama “Pegawai.php”.
Controller digunakan untuk mengambil permintaan, memparsing permintaan, menginisialisasi, memanggil model yang dibutuhkan, mengambil respon dan mengirimkannya ke view.
Untuk membuat controller dapat dilakukan melalui jendela Terminal/ Command Prompt, masih aktif pada folder project Laravel 7 Anda, lalu jalankan perintah artisan berikut :
php artisan make:controller PegawaiController --resource --model=Pegawai
Dengan menjalankan perintah artisan diatas maka kita akan meng-generate satu buah controller dengan nama “PegawaiController.php” dan satu buah model dengan nama “Pegawai.php”. Pada controller “PegawaiController.php” akan kita jumpai sebanyak 7 methods yang secara otomatis terbentuk ketika kita menjalankan perintah artisan controller disertai dengan –resource , diantaranya methods yang terbentuk adalah :
1)index() 2)create() 3)store() 4)show() 5)edit() 6)update() 7)destroy()
Model pada Laravel dapat digunakan untuk mengolah data, sebagai peran untuk menyimpan, mengambil, mengubah, dan menghapus data pada database. Lalu bagaimana caranya membuat model pada Laravel? Jika Anda membutuhkan sebuah model dan ingin membuatnya, Anda dapat membuatnya secara manual dan meletakkannya pada folder “app”, akan tetapi akan lebih mudah jika Anda membuatnya dengan perintah artisan melalui jendela Terminal/ Command Prompt.
Berikut adalah perintah artisan untuk membuat model secara mandiri yang dapat dijalankan melalui jendela Terminal/ Command Prompt :
php artisan make:model Nama_model
7. Menambahkan File Blade untuk kebutuhan CRUD
Tahap selanjutnya adalah kita perlu menambahkan beberapa file blade untuk mendukung kebutuhan CRUD. Disini saya menambahkan menambahkan folder “layouts” dan “pegawai” lalu didalamnya saya letakkan file-file blade untuk kebutuhan CRUD data pegawai.
Berikut adalah file blade pada folder “layouts” :
app.blade.php
Dan berikut adalah file blade pada folder “pegawai” :
index.blade.php
Sehingga pada prosesnya melalui command line akan terlihat seperti berikut :
8. Menampilkan Data dari Database (READ)
Dari sederet cerita diatas untuk keperluan CRUD aplikasi data pegawai disini kita benar-benar mengawalinya dengan database yang masih kosong, sehingga kita perlu membuat data fake (data palsu) yang nantinya akan kita gunakan untuk operasi CRUD.
Oke langsung saja, untuk membuat data fake langkah pertama yang perlu kita lakukan adalah membuat database seeder terlebih dahulu, buka jendela Terminal/ Command Prompt lalu jalankan perintah membuat database seeder berikut :
php artisan make:seeder PegawaiSeeder
Perintah diatas akan menciptakan sebuah file seeder dengan nama “PegawaiSeeder.php” pada folder “database/seeds/PegawaiSeeder.php”.
Kemudian untuk menghasilkan data fake (data palsu) kita akan meminta bantuan Faker, sebuah library open-source yang dibuat oleh Francois Zaninotto, Faker sangat berguna untuk membuat data fake atau data palsu untuk kepentingan development 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
Lalu jalankan pula perintah composer dump-autoload pada jendela Terminal/ Command Prompt project Anda.
Jika sudah, sekarang kita lakukan modifikasi file 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,
'birthday' => $faker->date,
'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 perintah perulangan yang kita ketikkan pada code. Sekarang coba cek database tabel “pegawai” yang tadinya kosong sekarang sudah terisi data pegawai.
Oh iyah teman-teman, sepertinya untuk urusan menampilkan data (READ) disini jalan ceritanya agak panjang yah teman-teman. Nah untuk mengusir rasa kantuk dan kebosanan karena kepanjangan baca cerita yuk kita ambil sebuah cangkir lalu kita tuangkan kopi serta kita kucurkan air panas dari dispenser, lalu perlahan kita aduk dan kita sruput kopi hangatnya supaya semangat lagi heheeee…
Kita lanjutkan untuk menampilkan data ke view, saya akan mengajak Anda bagaimana mengimplementasikan Yajra datatable server side. Seperti kita ketahui bahwa library Yajra datatable sangat membantu para developer untuk mempermudah dalam hal menampilkan list record data ke view dalam bentuk datatable yang disertai fitur seperti pencarian, shorting data, dan pagination.
Dan berikut adalah cara menginstall Yajra datatable melalui composer :
composer require yajra/laravel-datatables-oracle
Lalu tambahkan kode berikut pada folder “config/app.php”:
'providers' => [ ..., Yajra\DataTables\DataTablesServiceProvider::class, ] 'aliases' => [ ..., 'Datatables' => Yajra\DataTables\Facades\Datatables::class, ]
Memanggil External Library jQuery Datatable dan jQuery Datepicker Pada template Framework Laravel
Ya, tidak salah lagi untuk menggunakan datatable kita diharuskan memanggil library jQuery Datatable kedalam view, disini saya menggunakan library external dalam hal ini saya menggunakan CDN sehingga harus selalu terhubung dengan interet, adapun caranya cukup mudah kita hanya cukup mengaitkan library CDN tersbut pada folder “resources/views/layouts/app.blade.php” sehingga tampak seperti berikut :
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.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="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
@yield('content')
</main>
</div>
@stack('scripts')
</body>
</html>
Menampilkan Data Dalam Bentuk Data Json
Langkah selanjutnya adalah menampilkan data yang telah kita buat ke dalam bentuk data Json, lakukan sedikit perubahan dengan menambahkan methods berikut pada controller :
public function datatable()
{
$data = Pegawai::latest()->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$aksi = '
<a href="javascript:void(0)" data-id="'.$row->id.'" title="Edit" id="editdata" class="edit btn btn-primary btn-sm">Edit</a>
<a href="javascript:void(0)" data-id="'.$row->id.'" title="Delete" class="hapus btn btn-danger btn-sm">Hapus</a>
';
return $aksi;
})
->rawColumns(['action'])
->make(true);
}
Kita cek dulu apakah method yang kita tambahkan tersebut berhasil meng-generate data Json dengan mengakses url berikut pada web browser.
localhost:8000/pegawai/datatable
Jika berjalan dengan baik maka akan ditampilkan halaman yang berisi data dalam bentuk format json seperti berikut :
Menampilkan data ke view dalam bentuk datatable
Langkah selanjutnya adalah melakukan modifikasi file blade “index.blade.php” pada folder “resources/views/pegawai/index.blade.php”, sehingga menjadi 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" id="tambah"><i class="fa fa-plus"></i>Tambah</button>
</div>
<div class="card-body">
<table id="tbl_list" class="data-table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Birthday</th>
<th>Email</th>
<th>Job</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var table = $('#tbl_list').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('pegawai.datatable') }}",
type: "GET",
columns: [
{ data: 'id'},
{ data: 'name'},
{ data: 'birthday'},
{ data: 'email'},
{ data: 'job'},
{ data: 'address'},
{ data: 'action'}
],
});
$('#date').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
});
});
</script>
@endpush
Kemudian tambahkan potongan code berikut pada method index() pada controller :
public function index()
{
return view('pegawai.index');
}
Sehingga jika berjalan dengan baik maka akan ditampilkan halaman datatable seperti berikut ini saat Anda mengakses url berikut :
localhost:8000/pegawai
Berikut ini adalah halaman datatablenya.
9. Menambahkan Data ke Database (CRUD)
Untuk menambahkan data dari form ke database saya menggunakan modal dan ajax, tambahkan potongan code modal form berikut pada file blade “index.balde.php” seperti berikut :
<!-- 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">×</span> </button> </div> <form name="frm_add" id="frm_add" class="form-horizontal" 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">Birthday</label> <div class="col-lg-12"> <input type="text" name="birthday" id="date" placeholder="Birthday" 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" id="idpegawai"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" id="saveBtn" class="btn btn-primary">Simpan</button> </div> </form> </div> </div> </div>
Lalu tambahkan code js berikut kedalam file blade “index.balde.php” seperti berikut :
$('#tambah').click(function () {
$('#saveBtn').val("tambah");
$('#idpegawai').val('');
$('#frm_add').trigger("reset");
$('#modal-add').modal('show');
});
$('#saveBtn').click(function (e) {
e.preventDefault();
$(this).html('Menyimpan..');
$.ajax({
data: $('#frm_add').serialize(),
url: "{{ url('pegawai/store') }}",
type: "POST",
dataType: 'json',
success: function (data) {
//console.log(data);
$('#frm_add').trigger("reset");
$('#saveBtn').html('Simpan');
$('#modal-add').modal('hide');
table.draw();
//table.ajax.reload();
},
error: function (data) {
console.log('Error:', data);
$('#saveBtn').html('Gagal simpan ulang');
}
});
});
10. Mengupdate Data dari ke Database (UPDATE)
Mengupdate data dari dan ke database berarti kita terlebih dahulu memanggil data yang kita pilih dan mengirimkannya kedalam form, kemudian kita mengirimkannya kedatabase. Untuk kebutuhan operasi update data saya menambahkan beberapa potongan kode pada method edit() pada controller seperti berikut :
public function edit(Request $request)
{
$data = Pegawai::findOrFail($request->get('id'));
echo json_encode($data);
}
Kemudian saya menambahkan potongan kode js berikut pada file blade “index.blade.php” seperti berikut :
$('body').on('click', '.edit', function () {
var cek = $(this).attr('data-id');
$.ajax({
url : "{{route('pegawai.edit')}}?id="+cek,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('#saveBtn').val("edit");
$("#frm_add").find("input[name=idpegawai]").val(data.id);
$("#frm_add").find("input[name=name]").val(data.name);
$("#frm_add").find("input[name=birthday]").val(data.birthday);
$("#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 tambahkan juga potongan code berikut pada method store() pada controller.
public function store(Request $request)
{
Pegawai::updateOrCreate(
['id' => $request->idpegawai],
[
'name' => $request->name,
'birthday' => $request->birthday,
'email' => $request->email,
'job' => $request->job,
'address'=> $request->address
]
);
return response()->json(['success'=>'Saved successfully.']);
}
11. Menghapus Data dari Database (DELETE)
Untuk menghapus data tambahkan potongan code berikut pada method destroy() pada controller, seperti berikut :
public function destroy($id)
{
DB::table('pegawais')->where('id', '=', $id)->delete();
}
Lalu tambahkan potongan code js berikut pada file blade “index.blade.php”, seperti berikut :
$('body').on('click', '.hapus', function () {
var cek = $(this).attr('data-id');
$.ajax({
url : "{{url('pegawai/destroy')}}/"+cek,
type: "POST",
success: function(data)
{
table.draw();
}
});
});
Sehingga, jika semua langkah diatas kita selesaikan dengan baik maka kita telah berhasil membuat project Laravel 7 CRUD Application with modals and ajax, kata akhir semoga tutorial ini dapat memberikan manfaat bagi siapapun yang membutuhkannya. Terimakasih dan mohon maaf jika masih terdapat kesalahan disana-sini.
Berikut ini adalah isi code secara lengkap dari operasi Laravel 7 CRUD Application with modals and ajax.
app\Http\Controllers\PegawaiController.php
<?php
namespace App\Http\Controllers;
use App\Pegawai;
use Illuminate\Http\Request;
use Datatables;
use DB;
class PegawaiController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('pegawai.index');
}
public function datatable()
{
$data = Pegawai::latest()->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$aksi = '
<a href="javascript:void(0)" data-id="'.$row->id.'" title="Edit" id="editdata" class="edit btn btn-primary btn-sm">Edit</a>
<a href="javascript:void(0)" data-id="'.$row->id.'" title="Delete" class="hapus btn btn-danger btn-sm">Hapus</a>
';
return $aksi;
})
->rawColumns(['action'])
->make(true);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
Pegawai::updateOrCreate(
['id' => $request->idpegawai],
[
'name' => $request->name,
'birthday' => $request->birthday,
'email' => $request->email,
'job' => $request->job,
'address'=> $request->address
]
);
return response()->json(['success'=>'Saved successfully.']);
}
/**
* Display the specified resource.
*
* @param \App\Pegawai $pegawai
* @return \Illuminate\Http\Response
*/
public function show()
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Pegawai $pegawai
* @return \Illuminate\Http\Response
*/
public function edit(Request $request)
{
$data = Pegawai::findOrFail($request->get('id'));
echo json_encode($data);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Pegawai $pegawai
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Pegawai $pegawai)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param \App\Pegawai $pegawai
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
DB::table('pegawais')->where('id', '=', $id)->delete();
}
}
Modal app\Pegawai.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Pegawai extends Model
{
protected $fillable = array('id','name','birthday','email','job','address');
}
File blade resources\views\layouts\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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.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="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<main class="py-4">
@yield('content')
</main>
</div>
@stack('scripts')
</body>
</html>
File blade resources\views\index.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" id="tambah"><i class="fa fa-plus"></i>Tambah</button>
</div>
<div class="card-body">
<table id="tbl_list" class="data-table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Birthday</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">×</span>
</button>
</div>
<form name="frm_add" id="frm_add" class="form-horizontal" 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">Birthday</label>
<div class="col-lg-12">
<input type="text" name="birthday" id="date" placeholder="Birthday" 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" id="idpegawai">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="saveBtn" 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')
}
});
var table = $('#tbl_list').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('pegawai.datatable') }}",
type: "GET",
columns: [
{ data: 'id'},
{ data: 'name'},
{ data: 'birthday'},
{ data: 'email'},
{ data: 'job'},
{ data: 'address'},
{ data: 'action'}
],
});
$('#tambah').click(function () {
$('#saveBtn').val("tambah");
$('#idpegawai').val('');
$('#frm_add').trigger("reset");
$('#modal-add').modal('show');
});
$('#saveBtn').click(function (e) {
e.preventDefault();
$(this).html('Menyimpan..');
$.ajax({
data: $('#frm_add').serialize(),
url: "{{ url('pegawai/store') }}",
type: "POST",
dataType: 'json',
success: function (data) {
//console.log(data);
$('#frm_add').trigger("reset");
$('#saveBtn').html('Simpan');
$('#modal-add').modal('hide');
table.draw();
//table.ajax.reload();
},
error: function (data) {
console.log('Error:', data);
$('#saveBtn').html('Gagal simpan ulang');
}
});
});
$('body').on('click', '.edit', function () {
var cek = $(this).attr('data-id');
$.ajax({
url : "{{route('pegawai.edit')}}?id="+cek,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('#saveBtn').val("edit");
$("#frm_add").find("input[name=idpegawai]").val(data.id);
$("#frm_add").find("input[name=name]").val(data.name);
$("#frm_add").find("input[name=birthday]").val(data.birthday);
$("#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');
}
});
});
$('body').on('click', '.hapus', function () {
var cek = $(this).attr('data-id');
$.ajax({
url : "{{url('pegawai/destroy')}}/"+cek,
type: "POST",
success: function(data)
{
table.draw();
}
});
});
$('#date').datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
});
});
</script>
@endpush
databases\migrations\2020_09_14_072352_create_pegawais_table.php
<?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->date('birthday');
$table->string('email');
$table->string('job');
$table->string('address');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('pegawais');
}
}
database\seeder\PegawaiSeeder.php
<?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,
'birthday' => $faker->date,
'email' => $faker->email,
'job' => $faker->jobTitle,
'address' => $faker->address
]);
}
}
}
