Membuat CRUD dengan Ajax di Laravel 8

Kali ini saya berbagi tentang cara membuat transaksi data sederhana yaitu CRUD atau Create, Read, Update, Delete dengan menggunakan bantuan JQuery Ajax di Laravel 8, Konsep aplikasi di tutorial ini fokus ke CRUD nya jadi saya tidak membuat tambahan fitur lain disini.

Beberapa tahapan yang akan di bahas di tutorial ini:

  1. Installasi Laravel 8 di localhost, dan jalankan local server laravel
  2. Konfigurasi database di file .env dan buat database di phpmyadmin
  3. Membuat dan generate tabel dengan migration laravel
  4. Membuat Route
  5. Membuat controller, model, dan view
  6. Selesai

Lakukan ini step by step sesuai tahapan :

sebelum memulai ini aktifkan terlebih dahulu Xampp versi 8 nya yah!!!

1. Installasi Laravel 8 di localhost, dan jalankan local server laravel

masuk ke folder htdocs lalu buka terminal dan ketikan perintah di bawah untuk install laravel 8 via composer :

Copy Code
composer create-project --prefer-dist laravel/laravel="^8.0" laravel_crudajax
install laravel 8

tunggu sampai ada tulisan Successfully…
lalu masuk ke folder project laravel nya, jika nama project sesuai dengan tutorial ini berarti namanya laravel_crudajax, silahkan masuk ke folder laravel_crudajax lalu buka terminal lagi ketikan perintah di bawah untuk menjalankan :

Copy Code
php artisan serve
jalankan laravel di local server

sampai sini anda sudah bisa menjalankan aplikasi laravel nya di browser dengan URL http://127.0.0.1:8000 atau http://localhost:8000

2. Konfigurasi database di file .env dan buat database di phpmyadmin

di dalam folder project / folder laravel_crudajax buka file .env lalu masukan nama database nya, saya akan menamai database nya dengan nama db_laravelcrudajax , lalu save!, seperti ini :

konfig database di file .env laravel

lalu buat lah database dengan nama sesuai konfiguasi di .env di phpmyadmin

caranya buka URL http://localhost/phpmyadmin/ di browser, lalu cari dan klik tombol New, lalu ketikan nama database laravel_crudajax di kolom yang tersedia, lalu klik tombol Create :

buat database di phpmyadmin

3. Membuat dan generate tabel dengan migration laravel

buka folder project / folder laravel_crudajax lalu buka terminal lagi dan ketikan perintah di bawah untuk mulai membuat migration tabel nya terlebih dahulu :

Copy Code
php artisan make:migration create_mahasiswa_table --create=table
buat table mahasiswa dengan migration laravel

lalu masuk ke folder project laravel_crudajax dan buka folder database\migrations dan buka file migrations yang tadi dibuat, lalu buat struktur field tabel nya seperti dibawah, jika sudah save! :

buat struktur tabel di migration laravel

ini contekan source code nya yang di baris ke 16 :

Copy Code
Schema::create('mahasiswa', function (Blueprint $table) {
            $table->id(); //id otomatis auto increment
            $table->string('npm',12)->nullable(); //type data varchar
            $table->string('nama',100)->nullable(); //type data varchar
            $table->string('jenis_kelamin',10)->nullable(); //type data varchar
            $table->text('alamat')->nullable(); //type data text
            $table->timestamps(); //otomatis dibuatkan kolom create_time dan update_time
        });

buka folder project / folder laravel_crudajax lalu buka terminal lagi dan ketikan perintah ini di terminal untuk generate tabel nya agar running di phpmyadmin :

Copy Code
php artisan migrate
generate table dengan artisan laravel migrations

3. Membuat Route

di laravel membuatuhkan route sebagai pintu agar controller dapat kita akses dengan nama url tertentu.

karna disini hanya mengakses satu controller maka load terlebih dahulu controller nya, lalu buat route yang lengkap baik resource,get,post,delete. ini untuk kebutuhan CRUD karna nantinya ajax akan call ke controller ke method tertentu.

cara buat route nya buka folder project / folder laravel_crudajax, lalu buka folder routes\web.php lalu buat script seperti dibawah , lalu save!, seperti ini :

route web laravel

ini contekan source code di atas :

Copy Code
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\MahasiswaController; //load controller yang akan digunakan
/*
|--------------------------------------------------------------------------
| 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('/', [MahasiswaController::class, 'index']);

Route::resource('/mahasiswa','MahasiswaController')->except(['show']);
Route::post('/mahasiswa', [MahasiswaController::class, 'index'])->name('mahasiswa');
Route::get('/mahasiswa', [MahasiswaController::class, 'index'])->name('mahasiswa');
Route::get('/mahasiswa/data', [MahasiswaController::class, 'data'])->name('mahasiswa.data');
Route::get('/mahasiswa/input', [MahasiswaController::class, 'input'])->name('mahasiswa.input');
Route::post('/mahasiswa/create', [MahasiswaController::class, 'create'])->name('mahasiswa.create');
Route::get('/mahasiswa/edit', [MahasiswaController::class, 'edit'])->name('mahasiswa.edit');
Route::post('/mahasiswa/update', [MahasiswaController::class, 'update'])->name('mahasiswa.update');
Route::delete('/mahasiswa/destroy/{id}', [MahasiswaController::class, 'destroy'])->name('mahasiswa.destroy');

5. Membuat controllers, models, dan views

kita mulai dengan membuat Controllers, beri nama controllers dengan nama MahasiswaController kita buat menggunakan artisan laravel,
buka folder project / folder laravel_crudajax lalu buka terminal lagi dan ketikan perintah ini :

Copy Code
php artisan make:controller MahasiswaController
buat controllers dengan artisan laravel

Lalu isikan MahasiswaController dengan script di bawah ini, di dalam script sudah diberi tanda agar mudah memahami dalam membaca source code nya :

Copy Code
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\MahasiswaModel; //load model yang digunakan

class MahasiswaController extends Controller
{
    //method yang dipanggil pertama kali
    public function index(){
        return view('mahasiswa_index'); //load view
    }

    //method untuk tampilkan data di tabel
    public function data(){
        $data  = MahasiswaModel::select("*")->orderBy('created_at', 'DESC')->get(); //query get semua data ke model
        $form = view("mahasiswa_data", ['data' => $data]); //passing data ke view
        $darr=array('data'=>''.$form.''); //convert ke bentuk array
        return response()->json($darr); //convert ke respone json
    }

    //method untuk tampilkan form input
    public function input(){
        $form = view("mahasiswa_input"); //load view
        $darr=array('data'=>''.$form.''); //convert ke bentuk array
        return response()->json($darr); //convert ke respone json
    }

    //method untuk insert data
    public function create(Request $request)
    {   
        $postall = $request->all(); //tangkap semua parameter yang di post
        $inputclear = \Arr::except($request->all(), array('_token', '_method')); //pisahkan parameter token 
        $npm = $request->input('npm'); //tangkap parameter npm yang di post

        $cek = MahasiswaModel::where('npm', '=', $npm)->count(); //query cek npm apakah sudah ada di tabel atau belum
        if($cek) {
            return response()->json([ //respon json jika gagal
                'status' => false,
                'info' => "NPM Sudah ada di database"
            ], 201);
            return false;
        }

        $post = MahasiswaModel::create($inputclear); //jika lolos pengecekan npm maka query insert ini jalan 
        return response()->json([ //respon json jika berhasil
            'status' => true,
            'info' => 'Success'
        ], 201);
    }

    //method untuk tampilkan form edit
    public function edit(Request $request)
    {
        $where = array('id' => $request->input('id')); //tangkap parameter id yang di post
        $post  = MahasiswaModel::where($where)->first(); //get ke tabel di model berdasarkan id

        $form = view("mahasiswa_edit", ['data' => $post]); //passing data ke view
        $darr=array('data'=>''.$form.''); //convert ke bentuk array
        return response()->json($darr); //convert ke respone json
    }

    //method untuk update data
    public function update(Request $request)
    {
        $postall = $request->all(); //tangkap semua parameter yang di post
        $inputclear = \Arr::except($request->all(), array('_token', '_method')); //pisahkan parameter token 
        $id = $request->input('id'); //tangkap parameter id yang di post
        $npm = $request->input('npm'); //tangkap parameter npm yang di post

        $npm_b = MahasiswaModel::select('npm')->where('id', $id)->first(); //get data by id untuk dapatkan npm lama 

        $cek = MahasiswaModel::where([ //query cek npm apakah sudah ada di tabel atau belum dibandingkan dengan npm baru dan lama
            ['npm', '!=', $npm_b->npm],
            ['npm', '=', $npm]
        ])->count();
        if($cek) {
            return response()->json([ //respon json jika gagal
                'status' => false,
                'info' => "NPM Sudah ada di database"
            ], 201);
            return false;
        }

        MahasiswaModel::where('id', $id)->update($inputclear); //jika lolos pengecekan npm maka query update ini jalan 
        return response()->json([ //respon json jika berhasil
            'status' => true,
            'info' => "Success"
        ], 201);
    }

    //method untuk delete data
    public function destroy($id)
    {
        MahasiswaModel::where('id', $id)->delete(); //query delete data berdasarkan id
        return response()->json([ //respon json jika berhasil
            'status' => true,
            'info' => "Success"
        ], 201);
    }

}

Screenshoot letak MahasiswaController sebagai berikut :

file MahasiswaController

lalu kita membuat Models, beri nama models dengan nama MahasiswaModel kita buat menggunakan artisan laravel,
buka folder project / folder laravel_crudajax lalu buka terminal lagi dan ketikan perintah ini :

Copy Code
php artisan make:model MahasiswaModel
buat models dengan artisan laravel

Lalu isikan MahasiswaModel dengan script di bawah ini, di dalam script sudah diberi tanda agar mudah memahami dalam membaca source code nya :

Copy Code
<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class MahasiswaModel extends Model
{
    protected $table = "mahasiswa"; //protected $table untuk konvensi penamaan tabel karna laravel default mengharuskan pakai akhiran s, seperti mahasiswas
    protected $guarded = ['id']; // Semua kolom yang kita tambahkan ke $guarded akan diabaikan
}

Screenshoot letak MahasiswaModel sebagai berikut :

MahasiswaModel

Sekarang kita buat 4 file di foler Views kiat buat file dengan nama:

  1. mahasiswa_index.blade.php
  2. mahasiswa_data.blade.php
  3. mahasiswa_input.blade.php
  4. mahasiswa_edit.blade.php

Berikut Source code view nya :

Views mahasiswa_index.blade.php :

Copy Code
<!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() }}">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="Description" content="Belajar CRUD dengan ajax di laravel">
    <meta name="Author" content="zai.web.id">
    <meta name="Keywords" content="CRUD dengan ajax di laravel" />

    <!-- Title -->
    <title>@yield('title','CRUD ajax laravel')</title>

    <!--- Favicon --->
    <link rel="icon" href="{{ asset('favicon.ico') }}" type="image/x-icon" />

    <!--- CDN CSS bootstrap --->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

     <!--- CDN Jquery --->
     <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
     
    <!--- CDN Jquery bootstrap --->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card mt-5 mb-5">
                    <div class="card-header">
                        Data Mahasiswa
                    </div>
                    <div class="card-body">
                        
                        <div class="pull-left mb-3">
                            <button class="btn btn-primary" onclick="input()">Tambah data</button>
                            <button class="btn btn-secondary" onclick="reload_table()">Refresh</button>
                        </div>
                        
                        <div class="table-responsive" id="area_tabel"></div>

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


    <div class="modal" tabindex="-1" id="mdl_modal_form" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="content_modal_form"></div>
            </div>
        </div>
    </div>

    <script>    
    $(window).on("load", function() { //otomatis aktif ketika page di refresh
		reload_table(); //fungsi untuk load table
	});

    $(function() { //otomatis aktif ketika page di jalankan
        //fungsi untuk load csrf token
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    });

    //fungsi untuk load tabel
    window.reload_table = function() {
        var url = "{{ route('mahasiswa.data') }}";
        var param = {};
        $.ajax({
            type: "GET",
            dataType: "json",
            data: param,
            url: url,
            beforeSend: function() {
                $("#area_tabel").html("<div class='text-center pt-4 pb-4'>Mohon Tunggu...</div>");
            },
            success: function(val) {
                $("#area_tabel").html(val['data']);
            }
        });
    }

    //fungsi untuk load form input
    window.input = function() {
        $("#mdl_modal_form").modal({backdrop: 'static',keyboard: false});
        var url = "{{ route('mahasiswa.input') }}";
        var param = {};
        $.ajax({
            type: "GET",
            dataType: "json",
            data: param,
            url: url,
            beforeSend: function() {
                $("#content_modal_form").html("<div class='text-center pt-4 pb-4'>Mohon Tunggu...</div>");
            },
            success: function(val) {
                $("#content_modal_form").html(val['data']);
            }
        });
    }

    //fungsi untuk load form edit
    window.edit = function(id) {
        $("#mdl_modal_form").modal({backdrop: 'static',keyboard: false});
        var url = "{{ route('mahasiswa.edit') }}";
        var param = {id: id};
        $.ajax({
            type: "GET",
            dataType: "json",
            data: param,
            url: url,
            beforeSend: function() {
                $("#content_modal_form").html("<div class='text-center pt-4 pb-4'>Mohon Tunggu...</div>");
            },
            success: function(val) {
                $("#content_modal_form").html(val['data']);
            }
        });
    }

    //fungsi untuk insert atau update
    window.formSubmit = function(id){
        var param = $("#" + id).serialize();
        var url = $("#" + id).attr("url");
        $.ajax({
            type: "POST",
            dataType: "json",
            data: param,
            url: url,
            beforeSend: function() {
                $('#msg_'+id+'').addClass('fa fa-spinner fa-spin');
            },
            success: function(val) {
                $('#msg_'+id+'').removeClass('fa fa-spinner fa-spin');
                if (val["status"] == false) {
                    alert(val['info']);
                }else{
                    $("#" + id)[0].reset();
                    alert(val['info']);
                    reload_table();
                    $("#mdl_modal_form").modal("hide");
                    $("body").removeClass("modal-open");
                    $(".modal-backdrop").remove();
                }
            }
        });
    }

    //fungsi untuk delete dengan konfirmasi
    window.hapus = function(id){
        if (confirm("Are you sure?")) {
            var url = "mahasiswa/destroy/"+id;
            var param = {id: id};
            $.ajax({
                type: "DELETE",
                dataType: "json",
                data: param,
                url: url,
                success: function(val) {
                    if (val["status"] == true) {
                        alert(val['info']);
                        reload_table();
                    }
                }
            });
        }
        return false;
    }
    </script> 


    @stack('costum-script')
</body>
</html>

Views mahasiswa_data.blade.php :

Copy Code
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th scope="col">NO</th>
            <th scope="col">NPM</th>
            <th scope="col">NAMA</th>
            <th scope="col">JENIS KELAMIN</th>
            <th scope="col">ALAMAT</th>
            <th scope="col">AKSI</th>
        </tr>
    </thead>
    <tbody>
        @if(count($data) > 0)
            <?php $no=1; ?>
            @foreach($data as $v)
            <tr>
                <td>{{ $no++ }}</td>
                <td>{{ $v->npm }}</td>
                <td>{{ $v->nama }}</td>
                <td>{{ $v->jenis_kelamin }}</td>
                <td>{{ $v->alamat }}</td>
                <td><button class="btn btn-info" onclick="edit({{ $v->id }})">Edit</button> <button class="btn btn-danger" onclick="hapus({{ $v->id }})">Hapus</button></td>
            </tr>
            @endforeach
        @else
            <tr>
                <td colspan="6" class="text-center">Data tidak ada...</td>
            </tr>
        @endif
    </tbody>
</table>

Views mahasiswa_input.blade.php :

Copy Code
    <div class="modal-header">
        <h5 class="modal-title">Tambah Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
        </button>
    </div>
    <form action="javascript:formSubmit('modal_input')" id="modal_input" 
        url="{{ route('mahasiswa.create') }}"
        method="post">
    <div class="modal-body">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label>NPM</label>
                    <input type="text" class="form-control" name="npm" placeholder="NPM" required>
                </div>
                <div class="form-group">
                    <label>Nama</label>
                    <input type="text" class="form-control" name="nama" placeholder="Nama" required>
                </div>
                <div class="form-group">
                    <label>Jenis Kelamin</label>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="jenis_kelamin" value="Laki-laki">
                        <label class="form-check-label">
                            Laki-laki
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="jenis_kelamin" value="Perempuan">
                        <label class="form-check-label">
                            Perempuan
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>Alamat</label>
                    <input type="text" class="form-control"  name="alamat" placeholder="Alamat">
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" onclick="formSubmit('modal_input')" class="btn btn-primary"><i id="msg_modal_input"></i>  Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
    </form>

Views mahasiswa_edit.blade.php :

Copy Code
    <div class="modal-header">
        <h5 class="modal-title">Edit Data</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
        </button>
    </div>
    <form action="javascript:formSubmit('modal_edit')" id="modal_edit" 
        url="{{ route('mahasiswa.update') }}"
        method="post">
    <div class="modal-body">
        @csrf
        <input type="hidden" name="id" value="{{ $data->id }}">
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <label>NPM</label>
                    <input type="text" class="form-control" name="npm" placeholder="NPM" value="{{ $data->npm }}" required>
                </div>
                <div class="form-group">
                    <label>Nama</label>
                    <input type="text" class="form-control" name="nama" placeholder="Nama" value="{{ $data->nama }}" required>
                </div>
                <div class="form-group">
                    <label>Jenis Kelamin</label>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="jenis_kelamin" value="Laki-laki" @if ($data->jenis_kelamin === 'Laki-laki') checked @endif>
                        <label class="form-check-label">
                            Laki-laki
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="jenis_kelamin" value="Perempuan" @if ($data->jenis_kelamin === 'Perempuan') checked @endif>
                        <label class="form-check-label">
                            Perempuan
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label>Alamat</label>
                    <input type="text" class="form-control"  name="alamat" value="{{ $data->alamat }}" placeholder="Alamat">
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" onclick="formSubmit('modal_edit')" class="btn btn-primary"><i id="msg_modal_edit"></i>  Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
    </form>

letak file view nya seperti screenshot di bawah ini :

letak file views

6. Selesai

Kurang lebih DEMO JADI nya sebagai berikut :

Selamat Mencoba.

Full source code bisa cek disini : https://github.com/zaiheryf/laravel_crudajax

Tags
Zainurrohman Hery Firmansyah
Zainurrohman Hery Firmansyah
Articles: 63

One comment

Leave a Reply

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

Related Posts

Home
Produk
Tutorial
Search