Laravel tutorial: Cara import file Excel ke dalam Database

Laravel memungkinkan kita untuk melakukan Import file excel kedalam database berkat dukungan package Laravel Excel dari maatwebsite. Fitur ini sangat bermanfaat kedepanya apabila Anda mengembangkan aplikasi yang berkaitan dengan management data excel dan database.

Dengan memanfaatkan fleksibilitas dari Microsoft Excel, serta kelengkapan package dari framework Laravel maka proses import data dari Excel bukan lah sesuatu hal yang susah untuk dilakukan. Anda tinggal mengikuti beberapa proses step yang tidak memerlukan banyak baris kode.

Persiapan

Sebelum melangkah lebih jauh untuk membuat modul import file Excel kedalam Database, ada baiknya Anda mempersiapkan beberapa hal dibawah ini agar project yang akan dikerjakan dapat berjalan dengan baik.

  1. Install Laravel
  2. Konfigurasi database
  3. Install package laravel-excel

Install Laravel

Saya menggunakan Laravel versi 7.4 untuk pembuatan aplikasi ini, untuk proses instalasi secara lengkap bisa dilihat disini. Untuk Anda yang menggukan Laravel dengan versi lain, silahkan menyesuaikan.

Konfigurasi database

Pengaturan database sangat diperlukan untuk menyimpan data hasil import dari file excel. Pada kesempatan ini saya mengasumsikan ingin mengimport data pegawai dengan detail keterangan sebagai berikut:

  • ID (id) bigint unsigned NOT NULL
  • Nama (nama) varchar(255) NULL
  • Alamat (alamat) varchar(255) NULL
  • Email (email) varchar(255) NULL
  • Nomor telpon (no_telpon) varchar(255) NULL
  • Jenis kelamin (jenis_kelamin) varchar(255) NULL
  • Created at (created_at) timestamp NULL
  • Updated at (updated_at) timestamp NULL

Untuk membuat table tersebut Saya menggunakan fitur migration dari Laravel. Cara ini opsional karena Anda juga bisa melakukanya secara manual didalam database.

php artisan make:migration create_table_pegawai
Schema::create('pegawai', function (Blueprint $table) {
  $table->id();
  $table->string('nama')->nullable();
  $table->string('alamat')->nullable();
  $table->string('email')->nullable();
  $table->string('no_telpon')->nullable();
  $table->string('jenis_kelamin')->nullable();
  $table->timestamps();
});

Setelah selesai membuat database langkah selanjutnya adalah membuat model yang memungkinkan kita berinteraksi antara database dan aplikasi.

php artisan make:model Pegawai

Setelah model berhasil dibuat buka file model di App/Pegawai.php selanjutnya tambahkan kode dibawah ini:

class Pegawai extends Model
{
    protected $table = 'pegawai';

    protected $fillable = [
        'nama', 
        'alamat', 
        'email', 
        'no_telpon', 
        'jenis_kelamin'
    ];
}

Install package laravel-excel

Untuk menjembatani proses import file Excel kedalam database diperlukan package yang sesuai yang dibuat oleh maatwebsite. Selain fitur export, package tersebut juga menyediakan fitur untuk import. Untuk keterangan lebih detail Anda bisa membacanya sendiri di laman website mereka.

composer require maatwebsite/excel

Setelah package berhasil diinstall, langkah selanjutnya adalah membuat Import. Buka terminal dan ketikan perintah seperti dibawah ini:

php artisan make:import PegawaiImport --model=Pegawai

Setelah file Import berhasil dibuat, buka Imports/PegawaiImport.php kemudian tambahkan kode dibawah ini:

class PegawaiImport implements ToModel
{
    public function model(array $row)
    {
        //sesuaikan dengan nama kolom yang sudah dibuat pada database dengan jumlah kolom pada excel
        return new Pegawai([
            'nama' => $row[1],
            'alamat' => $row[2],
            'email' => $row[3],
            'no_telpon' => $row[4],
            'jenis_kelamin' => $row[5],
        ]);
    }
}

Perhatikan data pegawai dibawah ini. Masing-masing kolom memiliki nomor urut yang nantinya akan dibaca oleh aplikasi untuk diimport kadalam database. Kolom A mewakili urutan ke 0 dan seterusnya hingga kolom F dengan urutan ke 5. Terlihat pada kode sebelumnya, kolom 0 tidak diikutsertakan sehingga tidak akan terbaca oleh aplikasi.

Antar muka

resources/views/layouts/app.blade.php

Untuk membuat tampilan antar muka dan user experience Saya menggunakan beberapa module antara lain JQuery, Bootstrap dan DataTables.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/2.3.0/css/dataTables.bootstrap4.css" rel="stylesheet">
...
<script src="https://code.jquery.com/jquery-3.7.1.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/2.3.0/js/dataTables.js" ></script>
<script src="https://cdn.datatables.net/2.3.0/js/dataTables.bootstrap4.js" ></script>

resources/views/pegawai/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">Import file Excel kedalam database</div>
                        <div class="card-body"> 
                            <div id="alert_msg"></div>
                            <button class="btn btn-primary btn-sm tambah_petugas mb-3" id="add_file">Tambah</button>
                            <button class="btn btn-danger btn-sm tambah_petugas mb-3" id="clear_table">Clear</button>
                            <div>

                                <table class="table table-sm table-striped tb_pegawai" id="tb_pegawai">
                                    <thead>
                                        <tr>
                                            <th width='180px'>Nama</th>
                                            <th width='280px'>Alamat</th>
                                            <th>Email</th>
                                            <th width='180px'>Nomor telpon</th>
                                            <th width='180px'>Jenis kelamin</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>

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

    <div class="modal fade" id="modal_import" 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">Import data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="err_msg"></div>
                <form id="form_import" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="file" class="font-weight-bold">File</label>
                        <input type="file" class="form-control-file" name="file" id="file">
                        <small class="form-text text-muted">Jenis file csv, xls, xlsx</small>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="save">Import</button>
                    </div>
                </form>
            </div>
            
            </div>
        </div>
    </div>
@endsection

Untuk membuat tampilan aplikasi lebih dinamis dan user friendly kita akan implementasikan JavaScript dan AJAX di dalam file yang sama.

@push('scripts')
<script type="text/JavaScript">
    $(document).ready(function(){
        //klik tombol untuk menampilkan modal form
        $('body').on('click', '#add_file', function(){
            $('#modal_import').modal('show');
        });
        //menyimpan data/ import file
        $('#save').click(function(e){
            e.preventDefault();
            var formData = new FormData(document.getElementById('form_import'));
            $.ajax({
                type:'POST',
                url:"{{route('api.v1.import')}}",
                data:formData,
                processData:false,
                contentType:false,
                dataType:'JSON',
                success:function(data){
                    console.log(data)
                    $('#modal_import').modal('hide');
                    $('#tb_pegawai').DataTable().ajax.reload();
                },
                error:function(err){
                    if(err.status == 422){
                        $.each(err.responseJSON.errors, function (i, error) {
                            document.getElementById('err_msg').innerHTML = '<div class="alert alert-danger" role="alert">'+error[0]+'</div>'
                        });
                    }
                }
            });
        });

        $(".tb_pegawai").DataTable({
            ajax:{
                url:"{{route('api.v1.pegawai')}}",
                dataSrc:'pegawai'
            },
            processing:false,
            serverside:false,
            columns:[
                {data:'nama'},
                {data:'alamat'},
                {data:'email'},
                {data:'no_telpon'},
                {data:'jenis_kelamin'},
            ]
        });

        $('body').on('click', '#clear_table', function(){
            if(confirm('Seluruh data akan dihapus. Anda yakin?')){
                $.ajax({
                    url:"{{route('api.v1.pegawai.clear')}}",
                    type:'DELETE',
                    data:{
                        '_token':'{{csrf_token()}}'
                    },
                    dataType:'json',
                    success:function(data){
                        if(data.count > 0){
                            $('#tb_pegawai').DataTable().ajax.reload();

                            document.getElementById('alert_msg').innerHTML = '<div class="alert alert-success alert-dismissible fade show" role="alert">Data sebanyak '+data.count+' berhasil dihapus.<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>';
                        }else{
                            document.getElementById('alert_msg').innerHTML = '<div class="alert alert-warning alert-dismissible fade show" role="alert"><strong>Holy guacamole!</strong> Data sudah kosong.<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div>';
                        }

                    },error:function(err){
                        console.log(err.responseText);
                    }
                });
            }
        });
    });
</script>
@endpush

Controller

Controllers/PegawaiController.php

<?php

namespace App\Http\Controllers;

use App\Imports\PegawaiImport;
use Illuminate\Http\Request;
use App\Pegawai;
use Maatwebsite\Excel\Facades\Excel;

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

    public function getDataPegawai(){
        $pegawai = Pegawai::select('nama', 'alamat', 'email', 'no_telpon', 'jenis_kelamin')->get();

        return response()->json(['pegawai'=>$pegawai]);
    }

    public function importDataPegawai(Request $request){
        $request->validate([
            'file'=>'required|mimes:csv,txt,xls,xlsx'
        ]);

        $file = $request->file('file');
 
		// membuat nama file unik
		$nama_file = rand().$file->getClientOriginalName();
 
		// upload ke folder pegawai di dalam folder public
		$file->move(public_path('file_pegawai'),$nama_file);
 
		// import data
        $pegawai = new PegawaiImport;
		Excel::import($pegawai, public_path('file_pegawai/'.$nama_file));

        return response()->json($pegawai);
    }

    public function clearDataPegawai(){

        $pegawai = Pegawai::all();
        $sum = $pegawai->count();
        
        if($sum > 0){
            $pegawai->each->delete();
        }

        return response()->json(['pegawai'=>$pegawai, 'count'=>$sum]);
    }

}

Route

routes/web

Route::get('import_excel/pegawai', 'PegawaiController@index');

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

Route::post('api/v1/pegawai/import', 'PegawaiController@importDataPegawai')->name('api.v1.import');

Route::delete('api/v1/pegawai/clear', 'PegawaiController@clearDataPegawai')->name('api.v1.pegawai.clear');

Hasil

Untuk melihat seperti apa hasilnya, silahkan buka pada browser Anda dan masukan url <your_host>/import_excel/pegawai maka akan muncul tampilan seperti dibawah ini.

Klik tombol tambah untuk menampilkan modal pop-up. Selanjutnya masukan file Excel atau CSV dan klik import untuk mengimport file kedalam database.

File yang berhasil diimport kedalam database akan muncul pada tabel

Bagaimana, cukup mudah bukan? Untuk melihat aplikasi demo diatas, Anda bisa melihatnya pada tautan berikut ini:

Demo

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

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