Articles
Tutorial Laravel 8 : Membuat CRUD Tanpa Reload + Full Source Code (Github)

Tutorial Laravel 8 : Membuat CRUD Tanpa Reload + Full Source Code (Github)

Tutorial laravel 8 : Membuat CRUD sederhana

Daftar Isi :

Pada artikel sebelumnya tentang Tutorial Laravel untuk Pemula, kita sudah mengetahui cara menginstall php, composer dan cara instalasi Laravel. Maka sekarang kita akan membuat aplikasi CRUD sederhana dengan Laravel 8. CRUD adalah singkatan dari create, read, update, and delete. Create digunakan untuk membuat data baru yang sering juga kita sebut sebagai insert. Read mirip dengan select dalam sql, dimana kita dapat menggunakan kata kunci dan memfilter data berdasarkan kriteria yang diinginkan. Update digunakan untuk memodifikasi data yang sudah disimpan di database. Sementara delete digunakan untuk menghapus fungsi yang tidak dibutuhkan. Berikut ini tutorial laravel 8 untuk membuat CRUD menggunakan Laravel:

Langkah Pertama : Install Laravel 8

Karena ditutorial sebelumya kita sudah menggunakan composer, kita akan install Laravel 8 melalui composer juga. Masuk ke folder penyimpanan kalian kemudian buka terminal dan jalankan command di bawah ini untuk membuat project Laravel 8 yang baru.

composer create-project laravel/laravel belajarCRUD

tutorial laravel 8 | Install Laravel 8 dengan composer | Xsis Academy

Tunggu hingga dependensi selesai terdownload. Jika sudah selesai, maka folder “belajarCRUD” langsung otomatis ada pada folder Laravel.

Langkah Kedua: Konfigurasi Database 

Langkah selanjutnya adalah mengatur konfigurasi database dari project kita.Teman-teman boleh membuat terlebih dahulu database dengan nama db_belajarCRUD, bisa lewat phpmyadmin seperti berikut ini:

tutorial laravel 8 | Membuat database Mysql dengan phpmyadmin | Xsis Academy

Atau dengan terminal

create database db_belajarcrud

tutorial laravel 8 | Membuat database Mysql dengan cmd | Xsis Academy

 

Nah, setelah selesai membuat database, maka untuk menghubungkan dengan database db_belajarCRUD kita coba buka file .env di text editor, lalu sesuaikan konfigurasi database, seperti di bawah ini:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306
DB_DATABASE=db_belajarCRUD 
DB_USERNAME=root 
DB_PASSWORD=

tutorial laravel 8 | konfigurasi database di env | Xsis Academy

Untuk passwordnya dapat kalian sesuaikan dengan password mysql kalian, jika kalian tidak menggunakan password maka kalian bisa langsung akses ke mysql kalian.

Langkah Ketiga: Konfigurasi Datatables

Kita masuk ke direktori project kemudian install datatables menggunakan composer kalian dengan perintah berikut ini:

composer require yajra/laravel-datatables-oracle

tutorial laravel 8 | install datatables| Xsis Academy

Setelah selesai terdownload. Pergi ke direktori config dan buka file app.php. Dan tambahkan provider berikut ke dalam file app.php:

'providers' => [ 
..., 
Yajra\DataTables\DataTablesServiceProvider::class, 
]

'aliases' => [ 
..., 
'DataTables' => Yajra\DataTables\Facades\DataTables::class, 
]

tutorial laravel 8 | setting datatables providers | Xsis Academytutorial laravel 8 | setting datatables aliases | Xsis Academy

Kemudian publish package dengan perintah berikut:

php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"

 

Langkah Keempat: Membuat model dan migration

Buka lagi command prompt, dan jalankan perintah berikut:

php artisan make:model Category -m

tutorial laravel 8 | publish datatables | Xsis Academy

Kemudian buka file create_categories_table.php dalam direktori /database/migrations/ dan tambahkan kolom untuk table pada function up.  Untuk penjelasan lebih lengkap mengenai cara membuat tabel dan menambah kolom bisa dilihat di Laravel : Creating Table. function up disini akan dijalankan ketika kita melakukan migrate dan down akan dijalankan ketika kita menjalankan rollback migration.

 

<?php

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

class CreateCategoriesTable extends Migration
{

    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->text('description')->nullable();
            $table->timestamps();
        });
    }


    public function down()
    {
        Schema::dropIfExists('categories');
    }
}

tutorial laravel 8 | php artisan migrate | Xsis Academy

Untuk menambah tabel yang sudah dibuat dari migration ke database kita jalankan perintah berikut:

php artisan migrate

Di dalam model Category.php pada direktori /app/Models/ kita tambahkan perintah berikut ini:

{ 
use HasFactory; 
protected $guarded = []; 
}

tutorial laravel 8 | edit model | Xsis Academy

Bisa juga kita ubah menjadi fillable. $guarded digunakan untuk melindungi kolom mana yang tidak bisa diisi dan modifikasi menggunakan Laravel, sementara $fillable berguna untuk mendaftarkan atribut (nama kolom) yang bisa kita isi ketika melakukan insert atau update ke database. Jadi disini kita gunakan $guarded kosong saja agar semua kolom dapat kita isi.

Langkah Kelima: Membuat Controller dan Route

Persiapan project kita sudah selesai, selanjutnya kita sudah bisa mulai untuk membuat controller. Untuk menangani data yang akan ditampilkan, kita coba buat controller baru yaitu category Controller menggunakan php artisan command berikut ini:

php artisan make:controller CategoryController -r

tutorial laravel 8 | make controller | Xsis Academy

Setelah itu, buka file categoryController.php pada direktori app/Http/controller dan perbarui code di dalamnya:

<?php

namespace App\Http\Controllers;

use App\Models\Category;
use Illuminate\Http\Request;
use Yajra\DataTables\Facades\DataTables;

class categoryController extends Controller
{
    public function index(Request $request)
    {
        //medapatkan semua data category
        $category = Category::all();
        //jika ada request ajax maka yang direturn adalah datatables
        if ($request->ajax()) {
            return Datatables::of($category)
                ->addIndexColumn()
                ->addColumn('action', function ($row) {
                    //kita tambahkan button edit dan hapus
                    $btn = '<a href="javascript:void(0)" data-id="' . $row->id . '" class="edit btn btn-primary btn-sm editKategori"><i class="fa fa-edit"></i>Edit</a>';

                    $btn = $btn . ' <a href="javascript:void(0)" data-id="' . $row->id . '" class="btn btn-danger btn-sm deleteKategori"><i class="fa fa-trash"></i>Delete</a>';

                    return $btn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }

        return view('kategori.index',compact('category'));
    }


    public function store(Request $request)
    {
        //kita gunakan laravel laravel eloquent untuk update dan create agar lebih mudah
        //jadi jika request ada id maka akan melakukan update
        Category::updateOrCreate(
            ['id' => $request->id],
            [
                'name' => $request->name,
                'description' => $request->description
            ]
        );

        return response()->json(['success' => 'Category saved successfully.']);
    }


    public function edit($id)
    {
        //mengambil data sesuai id
        $category = Category::find($id);
        return response()->json($category);
    }


    public function destroy($id)
    {
        //delete sow
        Category::find($id)->delete();
        return response()->json(['success'=>'Category deleted successfully.']);
    }
}

Kemudian buat routes. Buka web.php dari routes direktori, kemudian perbarui routes seperti berikut:

<?php

use App\Http\Controllers\categoryController;
use Illuminate\Support\Facades\Route;


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

Route::resource('category', categoryController::class, ['except' => [
    'create', 'update','show'
]]);
tutorial laravel 8 | membuat route | Xsis Academy

Langkah Keenam : Membuat View

Setelah controller selesai, kita dapat membuat view untuk CRUD kita. Pertama-tama buatlah 2 file dalam direktori resources/views/kategori yaitu form.blade.php untuk form create dan juga edit dan juga index.blade.php untuk tampilan page-nya.

Pertama kita buat form di dalam modal untuk menambah dan mengedit data pada index.blade.php dengan script seperti berikut ini:

<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form">
    <div class="modal-dialog" role="document">
        {{-- tambahkan onsubmit dan action agar tidak reload --}}
        <form onSubmit="JavaScript:submitHandler()"  action="javascript:void(0)" class="form-horizontal">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"></h4>
                    <button type="button" class="close close-btn" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="id" id="id" class="form-control">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" name="name" id="name" class="form-control" required autofocus>
                        <span class="text-danger" id="error-name"></span>
                    </div>
                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea class="form-control" name="description" id="description" rows="5"></textarea>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-flat btn-primary" id="saveBtn"><i
                            class="fa fa-save"></i> Save</button>
                    <button type="button" class="btn btn-sm btn-flat btn-warning close-btn" data-dismiss="modal"><i
                            class="fa fa-arrow-circle-left"></i> Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>

Kemudian kita buat index.blade.php dan kita include modal form yang sudah kita buat tadi dengan script berikut ini:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CRUD Category</title>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/af-2.3.7/b-2.1.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.1/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.4/sr-1.0.1/datatables.min.css" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

</head>

<body>
    <div class="container-fluid">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Data Kategori</h1>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-lg-12">
                    <div class="box">
                        <div class="box-header with-border">
                            <button onclick="addForm()" class="btn btn-success btn-xs btn-flat"><i
                                    class="fa fa-plus-circle"></i>
                                Tambah</button>
                        </div>
                        <div class="box-body table-responsive">
                            <table class="table table-stiped table-bordered">
                                <thead>
                                    <tr>
                                        <th width="5%">No</th>
                                        <th>Name</th>
                                        <th>Description</th>
                                        <th width="10%"><i class="fas fa-cog"></i></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @includeIf('kategori.form')
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript"
        src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.11.3/af-2.3.7/b-2.1.1/cr-1.5.5/date-1.1.1/fc-4.0.1/fh-3.2.1/kt-2.6.4/r-2.2.9/rg-1.1.4/rr-1.2.8/sc-2.0.5/sb-1.3.0/sp-1.4.0/sl-1.3.4/sr-1.0.1/datatables.min.js">
    </script>
    <script>
        //seting header csrf token laravel untuk semua request ajax 
        $(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

        });

        //membuat datatables
        var table = $('.table').DataTable({
            processing: true,
            autoWidth: false,
            responsive: true,
            lengthChange: true,
            processing: true,
            serverSide: true,
            dom: 'lfrtip',
            //mengambil data dengan category controller
            ajax: "{{ route('category.index') }}",
            columns: [{
                    data: 'DT_RowIndex',
                    searchable: false
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'description',
                    name: 'description',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },
            ]
        });
        
        //close modal
        $('.close-btn').click(function(e) {
            $('.modal').modal('hide')
        });

        //save data untuk edit atau create
        $('#saveBtn').click(function(e) {
            var formdata = $("#modal-form form").serializeArray();
            var data = {};
            $(formdata).each(function(index, obj) {
                data[obj.name] = obj.value;
            });
            if (validation(data)) {
                $.ajax({
                    data: $('#modal-form form').serialize(),
                    url: "{{ route('category.store') }}",
                    type: "POST",
                    dataType: 'json',
                    success: function(data) {
                        $('#modal-form').modal('hide');
                        $('.table').DataTable().draw();
                    },
                    error: function(data) {
                        console.log('Error:', data);
                        $('#saveBtn').html('Save Changes');
                    }
                });
            }

        });


        //memunculkan form edit
        $('body').on('click', '.editKategori', function() {
            var id = $(this).data('id');
            console.log(id);
            $.get("{{ route('category.index') }}" + '/' + id + '/edit', function(data) {
                $('.modal-title').text('Edit Category');
                $('#modal-form').modal('show');
                $('#id').val(data.id);
                $('#name').val(data.name);
                $('#description').val(data.description);
            })
        });

        //delete data
        $('body').on('click', '.deleteKategori', function() {
            var id = $(this).data("id");
            if (confirm("Are You sure want to delete !") == true) {
                $.ajax({
                    type: "DELETE",
                    url: "{{ route('category.store') }}" + '/' + id,
                    success: function(data) {
                        $('.table').DataTable().draw();
                    },
                    error: function(data) {
                        console.log('Error:', data);
                    }
                });
            }
        });

        //memunculkan form add
        function addForm() {
            $("#modal-form").modal('show');
            $('#id').val('');
            $('.modal-title').text('Add Category');
            $('#modal-form form')[0].reset();
            $('#modal-form [name=name]').focus();
        }

        //validasi name harus di isi
        function validation(data) {
            let formIsValid = true;
            $('span[id^="error"]').text('');
            if (!data.name) {
                formIsValid = false;
                $("#error-name").text('The name field is required.')
            }
            return formIsValid;
        }

        function submitHandler() {
            $('#saveBtn').click();
        }
    </script>
</body>

</html>

Langkah Ketujuh: Start Development Server

Untuk menjalankan Server php kita jalankan perintah berikut ini :

 

php artisan serve

 

Dan untuk melihat hasil dari Tutorial laravel 8 CRUD yang sudah kita kerjakan tadi dapat dilihat di https://127.0.0.1:8000/category

Aplikasi yang sudah kita buat tadi akan terlihat seperti pada gambar berikut:
tutorial laravel 8 | CRUD Laravel tanpa reload | Xsis Academy

Untuk full source codenya dapat di download di :

https://github.com/brahmantiodiaz/belajar-laravel-xsis

 

 

Post Views: 6,311
Admin
This Post Has 2 Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts
Back To Top

Table of Contents

→ Table Of Content