tutorial laravel

Laravel CRUD Ajax MySql

immanueljl44@gmail.comLaravel

Pada artikel Laravel CRUD Ajax MySql kali ini, kita akan membahas cara membuat CRUD menggunakan Framework Laravel dengan metode Ajax. Tulisan ini merupakan kelanjutan dari artikel sebelumnya yaitu, (https://soft-gain.com/2019/07/21/crud-pada-laravel-mysql/). Dimana pada artikel Laravel CRUD Ajax MySql ini kita akan menggunakan Ajax yang mana setiap request yang dikirimkan akan di kerjakan secara asynchronous (tidak langsung).

AJAX itu sendiri adalah singkatan dari Asynchronous Javascript and XML, yang memungkinkan aplikasi web bekerja secara asynchronous (tidak langsung), memproses setiap request yang dikirim ke server di kerjakan dari sisi background.

Baiklah pertama-tama buat migration, model dan controller seperti gambar di bawah ini :

Untuk penjelasan migration bisa di lihat disini (https://soft-gain.com/2019/07/10/cara-dan-penjelasan-migration-pada-laravel/).

Source dari migration yang kita buat kurang lebih seperti ini : 

<?php

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

class CreateTableSgPegawai extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('sg_pegawai', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('nomor_induk_pegawai')->nullable();
            $table->string('nama')->nullable();
            $table->string('jabatan')->nullable();
            $table->string('alamat')->nullable();
            $table->timestamps();
        });
    }

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

Model nya seperti ini : 

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class sg_pegawai extends Model
{
    protected $table = 'sg_pegawai';

    protected $fillable = [
    	'nomor_induk_pegawai',
    	'nama',
    	'jabatan',
    	'alamat'
    ];
}

Controller nya seperti ini : 

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\sg_pegawai as model;

class sg_pegawai extends Controller
{
    public function index(){    	
    	return view('pegawai.table');
    }

    public function list(){    	
    	return model::all();
    }

    public function create(){
    	//
    }

    public function store(Request $request){
    	$result = model::create($request->all());

    	return $result;
    }

    public function show(){
    	//
    }

    public function edit($id){
    	$result = model::find($id);

    	return $result;
    }

    public function update(Request $request, $id){
    	$data = $request->except('_method', '_token');
    	model::where('id',$id)->update($data);

    	return 'sukses';
    }

    public function destroy($id){
    	model::destroy($id);

    	return 'sukses';
    }
}

Pada controller, jika biasanya return yang kita kirim adalah berupa view yang di sertai dengan variable, maka jika menggunakan ajax yang kita return adalah objek / baris data (umum nya berupa array atau json) yang nantinya akan kita parsing di view.

Tambahkan juga ini pada routes/web.php milik kita. Atau pada file routes.php jika menggunakan versi yang lebih lama dari versi saat saya membuat artikel ini (versi saya 5.8).

Route::get('/pegawai/list', 'sg_pegawai@list');
Route::get('/pegawai/destroy/{id}', 'sg_pegawai@destroy');
Route::resource('/pegawai', 'sg_pegawai');

Ini adalah source dari view yang akan kita buat : 

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Table Pegawai</div>

                <div class="card-body">
                    <div class="table-responsive">
                        <a class="btn btn-primary" href="javascript:;" data-toggle="modal" data-target="#formPegawai">
                            Tambah Data
                        </a>
                        <p></p>
                        <table class="table table-hover table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th class="text-center">Nomor Induk Pegawai</th>
                                    <th class="text-center">Nama</th>
                                    <th class="text-center">Jabatan</th>
                                    <th class="text-center">Alamat</th>
                                    <th class="text-center"> </th>
                                </tr>
                            </thead>
                            <tbody>
                                
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<div id="formPegawai" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Form Pegawai</h4>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">                    
                <div class="form-group col-xs-12 col-lg-12">
                    <label class="control-label">Nomor Induk Pegawai</label>
                    {{ Form::text('nomor_induk_pegawai', null, ['class' => 'form-control']) }}
                </div>
                <div class="form-group col-xs-12 col-lg-12">
                    <label class="control-label">Nama</label>
                    {{ Form::text('nama', null, ['class' => 'form-control']) }}
                </div>
                <div class="form-group col-xs-12 col-lg-12">
                    <label class="control-label">Jabatan</label>
                    {{ Form::text('jabatan', null, ['class' => 'form-control']) }}
                </div>
                <div class="form-group col-xs-12 col-lg-12">
                    <label class="control-label">Alamat</label>
                    {{ Form::text('alamat', null, ['class' => 'form-control']) }}
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" onclick="submit()">Save</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="{{ asset('js/jquery.min.js') }}"></script>
<script type="text/javascript">
    var idEdit = 0;

    $(document).ready(function(){        
        getIndex();
    });

    function getIndex(){
        $.ajax({
            type : 'get',
            url : 'http://localhost/belajar-laravel/public/pegawai/list',
            success : function(data){  
                $('tbody').html('');              
                $(data).each(function(x,y){
                    result = 
                    '<tr>'
                        + '<td>'+y.nomor_induk_pegawai+'</td>'
                        + '<td>'+y.nama+'</td>'
                        + '<td>'+y.jabatan+'</td>'
                        + '<td>'+y.alamat+'</td>'
                        + '<td>'
                            + '<a href="javascript:;" onclick="editPegawai('+y.id+')"><i class="fas fa-edit"></i></a>'
                            + '<a href="javascript:;" onclick="destroyPegawai(this.parentNode.parentNode, '+y.id+')"><i class="fas fa-trash-alt"></i></a>'
                        + '</td>'
                    + '</tr>';
                    $('tbody').append(result);
                });            
            },
        });
    }

    function submit(){
        var url;
        var type;
        var result;

        if( idEdit != 0 ){
            url = 'http://localhost/belajar-laravel/public/pegawai/'+idEdit;
            type = 'put';
        }else{
            url = 'http://localhost/belajar-laravel/public/pegawai';
            type = 'post';
        }

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type : type,
            url : url,
            data : {
                nomor_induk_pegawai : $('[name=nomor_induk_pegawai]').val(),
                nama : $('[name=nama]').val(),
                jabatan : $('[name=jabatan]').val(),
                alamat : $('[name=alamat]').val(),
            },
            success : function(data){   
                idEdit = 0;   
                $('[name=nomor_induk_pegawai]').val('');
                $('[name=nama]').val('');
                $('[name=jabatan]').val('');
                $('[name=alamat]').val('');
                $('#formPegawai').modal('hide');
                getIndex();
            },
        });
    }

    function editPegawai(id){        
        $.ajax({
            type : 'get',
            url : 'http://localhost/belajar-laravel/public/pegawai/'+id+'/edit',
            success : function(data){
                idEdit = data.id;                
                $('#formPegawai').modal('show');
                $('[name=nomor_induk_pegawai]').val(data.nomor_induk_pegawai);
                $('[name=nama]').val(data.nama);
                $('[name=jabatan]').val(data.jabatan);
                $('[name=alamat]').val(data.alamat);                             
            },
        });
    }

    function destroyPegawai(element, id){        
        $.ajax({
            type : 'get',
            url : 'http://localhost/belajar-laravel/public/pegawai/destroy/'+id,
            success : function(data){
                if( data == 'sukses' ){
                    element.remove();
                }                                
            },
        });
    }
</script>
@endsection

Yang perlu diperhatikan dari view adalah javascript nya. Dimulai dari function getIndex(), ini adalah fungsi yang kita pakai saat tampilan awal / list table akan di tampilkan. Fungsi ini berisi ajax request dengan type get, untuk atribute url di sesuaikan dengan apa yang kita daftar kan juga pada web.php (http://root/pegawai/list, karena pegawai/list lah yang kita daftarkan sebagai router di web.php). Dalam atribute success, berisi event-event apa saja yang akan kita jalankan saat ajax yang kita kirim telah sukses di olah server dan di kembalikan pada user.

Fungsi submit(), berisi ajax yang akan kita gunakan untuk mengirim form inputan dari client ke server. Di sini kita menggunakan fungsi yang sama untuk create dan edit data, hanya di bedakan dari if statement yang di ambil berdasarkan variable idEdit. Atribute success juga berisi event yang di jalankan ketika data berhasil di kirim kan. Yang perlu menjadi catatan adalah pentingnya atribute headers, atribute ini berisi csrf_token yang harus selalu di sertakan setiap kita ingin menggunakan ajax dengan method post / put (alasan security). Untuk routernya, kita menggunakan default yang di buat kan oleh laravel jika kita menggunakan route::resources().

Fungsi editPegawai() berisi event yang kita gunakan ketika user mengklik button edit. Sedangkan fungsi destroyPegawai() berisi event yang kita gunakan untuk menghapus data dari database.

langkah terakhir, jalankan migration dengan perintah php artisan migrate. Dan berikut ini adalah contoh dari aplikasi yang sudah kita buat.

Form isian
List table

Source code utuhnya bisa agan ambil dari git saya (https://github.com/ImmanuelJL/belajar-laravel).

Aplikasi yang kita buat sudah bisa beroperasi secara
asynchronous menggunakan ajax, tanpa harus men-load seluruh halaman aplikasi kita sudah bisa bekerja secara dinamis dalam pengolahan datanya. Demikian, terima kasih.

Leave a Reply

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