Fitur Import Excel di Laravel 8
Untuk membuat suatu fitur inport excel dalam sebuah sistem sangatlah mudah, ada banyak tersedia package yang dapat digunakan apalagi jika sistem tersebut dibuat dengan framework laravel, kita bisa menggunakan package dari laravel excel.
Pada kesempatanan ini, akan kita bahas artikel bagaimana cara membuat fitur import excel di laravel dengan package laravel excel, dipercobaan ini kita memulai dari nol dengan laravel versi 8.
Berikut langkah-langkah bagaimana cara membuat fitur import excel di laravel 8 dengan package laravel excel:
- Step 1: Instal Laravel
- Step 2: Instal package laravel excel
- Step 3: Buat Database baru
- Step 4: Jalankan migrate
- Step 5: Buat import class
- Step 6: Menyesuaikan file web.php
- Step 7: Edit file welcome.blade.php
- Pengujian
- Kesimpulan
Step 1: Instal Laravel
composer create-project laravel/laravel importexcelLangkah pertama teman-teman lakukan adlah membuat project baru laravel di folder yang kita inginkan. Instal laravel menggunakan composer dengan perintah command seperti di atas pada terminal teman-teman. Setelah proses selesai, kita akan mendapatkan folder baru atau folder project laravel didalam direktori yang teman-teman inginkan.
Step 2: Instal package laravel exel
composer require maatwebsite/excelKedua kita menginstal package yang akan digunakan untuk membuat fitur import exel di laravel, jalan perintah di atas di command teman-teman.
Step 3: Buat Database baru
Untuk menampung data hasil import excel nanti kita harus memerlukan/membuat databse baru untuk tempat menampung tabel yang berisi data hasil import. Maka dari itu, silahkan membuat database baru terlebih dahulu di xampp, atau sejenis lainya.
Step 4: Jalankan Migrate
php artisan migrate
Jalankan perintah di atas di command teman-teman untuk menampung data-data yang akan diimport nantinya, kita juga memerlukan memigrasi file-file yang ada di dalam folder migration ke database yang baru dibuat.
Step 5: Buat Import Class
php artisan make:import UserImport --model=user
Untuk dapat menggunakan package dari laravel exce, kita memerlukan import class. Untuk itu silahkan jalankan perintah di atas pada terminal command teman-teman, dengan menjalankan perintah di atas, akan membuat kita file UserImport.php yang terhubung dengan model User.php
Kemudian selanjutnya kita perlu edit sedikit di file UserImport.php.
Buka file UserImport.php yang terletak di dalam folder App\Import dan sesuaikan kodenya mejadi seperti di bawah ini:
<?php namespace App\Imports; use App\Models\User; use Illuminate\Support\Facades\Hash; use Maatwebsite\Excel\Concerns\ToModel; class UsersImport implements ToModel { /** * @param array $row * * @return User|null */ public function model(array $row) { return new User([ 'name' => $row[0], 'email' => $row[1], 'password' => Hash::make($row[2]), ]); } }
Jika dilihat pada susunan kode di atas, terdapat App\Models\User dan return mengarah ke new user. Data-data yang akan di import anatar lain name, email dan password.
Step 6 : Menyesuaikan file web.php
Agar dapat berjalan dengan sempurna, kita memerlukan rote seperti di bawah ini:
<?php
use Illuminate\Support\Facades\Route;
use App\Imports\UsersImport;
use Maatwebsite\Excel\Facades\Excel;
use App\Models\User;
/*
|--------------------------------------------------------------------------
| 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('/', function () {
$user = User::all();
return view('welcome',['user'=>$user]);
});
Route::post('/', function () {
Excel::import(new UsersImport, request()->file('file'));
return back();
});Route homepage default laravel akan kita gunakan untuk menampilkan data-data user dalam tabel dan menambahkan form upload di halaman yang sama
Dan kita memanggil import di route bukan controller, makanya kita perlu menambahkan kode seperti di bawah ini yang sudah disertakan dalam contoh kode keseluruhan di file web.php di atas.
use App\Imports\UsersImport;
use Maatwebsite\Excel\Facades\Excel;
use App\Models\User;Step 7: Edit file welcome.php
Karena kita membuat menggunakan homepage default laravel dan untuk menampilkan data-data user dan form upload,maka dari itu kita perlu edit file welcome.php, anti kode yang ada di file welcome.blade.php menjadi seperti di bawa ini:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Styles -->
<style>
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}a{background-color:transparent}[hidden]{display:none}html{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}*,:after,:before{box-sizing:border-box;border:0 solid #e2e8f0}a{color:inherit;text-decoration:inherit}svg,video{display:block;vertical-align:middle}video{max-width:100%;height:auto}.bg-white{--bg-opacity:1;background-color:#fff;background-color:rgba(255,255,255,var(--bg-opacity))}.bg-gray-100{--bg-opacity:1;background-color:#f7fafc;background-color:rgba(247,250,252,var(--bg-opacity))}.border-gray-200{--border-opacity:1;border-color:#edf2f7;border-color:rgba(237,242,247,var(--border-opacity))}.border-t{border-top-width:1px}.flex{display:flex}.grid{display:grid}.hidden{display:none}.items-center{align-items:center}.justify-center{justify-content:center}.font-semibold{font-weight:600}.h-5{height:1.25rem}.h-8{height:2rem}.h-16{height:4rem}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.leading-7{line-height:1.75rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-1{margin-left:.25rem}.mt-2{margin-top:.5rem}.mr-2{margin-right:.5rem}.ml-2{margin-left:.5rem}.mt-4{margin-top:1rem}.ml-4{margin-left:1rem}.mt-8{margin-top:2rem}.ml-12{margin-left:3rem}.-mt-px{margin-top:-1px}.max-w-6xl{max-width:72rem}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.p-6{padding:1.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.pt-8{padding-top:2rem}.fixed{position:fixed}.relative{position:relative}.top-0{top:0}.right-0{right:0}.shadow{box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)}.text-center{text-align:center}.text-gray-200{--text-opacity:1;color:#edf2f7;color:rgba(237,242,247,var(--text-opacity))}.text-gray-300{--text-opacity:1;color:#e2e8f0;color:rgba(226,232,240,var(--text-opacity))}.text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}.text-gray-500{--text-opacity:1;color:#a0aec0;color:rgba(160,174,192,var(--text-opacity))}.text-gray-600{--text-opacity:1;color:#718096;color:rgba(113,128,150,var(--text-opacity))}.text-gray-700{--text-opacity:1;color:#4a5568;color:rgba(74,85,104,var(--text-opacity))}.text-gray-900{--text-opacity:1;color:#1a202c;color:rgba(26,32,44,var(--text-opacity))}.underline{text-decoration:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.w-5{width:1.25rem}.w-8{width:2rem}.w-auto{width:auto}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}@media (min-width:640px){.sm\:rounded-lg{border-radius:.5rem}.sm\:block{display:block}.sm\:items-center{align-items:center}.sm\:justify-start{justify-content:flex-start}.sm\:justify-between{justify-content:space-between}.sm\:h-20{height:5rem}.sm\:ml-0{margin-left:0}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:pt-0{padding-top:0}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width:768px){.md\:border-t-0{border-top-width:0}.md\:border-l{border-left-width:1px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}@media (prefers-color-scheme:dark){.dark\:bg-gray-800{--bg-opacity:1;background-color:#2d3748;background-color:rgba(45,55,72,var(--bg-opacity))}.dark\:bg-gray-900{--bg-opacity:1;background-color:#1a202c;background-color:rgba(26,32,44,var(--bg-opacity))}.dark\:border-gray-700{--border-opacity:1;border-color:#4a5568;border-color:rgba(74,85,104,var(--border-opacity))}.dark\:text-white{--text-opacity:1;color:#fff;color:rgba(255,255,255,var(--text-opacity))}.dark\:text-gray-400{--text-opacity:1;color:#cbd5e0;color:rgba(203,213,224,var(--text-opacity))}}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<style>
body {
font-family: 'Nunito';
}
</style>
</head>
<body class="antialiased">
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center sm:pt-0">
<div class="container">
<div class="row">
<form action="/" method="post" enctype="multipart/form-data">
@csrf
<div class="input-group mb-3">
<input type="file" name="file" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn btn-primary" type="submit" id="button-addon2">Import</button>
</div>
</form>
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Password</th>
</tr>
</thead>
<tbody>
@php
$no = 0;
@endphp
@forelse ($user as $user)
<tr>
<th scope="row">{{ ++$no }}</th>
<td>{{ $user->name }}</td>
<td>{{ $user->email }}</td>
<td>{{ $user->password }}</td>
</tr>
@empty
<td colspan="4" class="table-active text-center">Tidak Ada Data</td>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>Pengujian
Setelah mengikuti langkah-langkah di atas dengan membuat fitur import excel laravel, sekarang kita coba fitur tersebut apakah sudah berjalan apa belum dengan membuat data exel yang berisis data-data user sesuai dengan apa yang kita buat. Format excel yang harus dibuat yaitu nama, email dan password.
Setelah file exel sudah siap, sekarang silahkan jalankan server project dengan php artisan serve. Jalankan perintah di bawah ini di comand teman-teman.
php artisan serve
Disisni kita akan belum mempunyai data user, oleh karena itu kita bisa menambahkan dengan fitur import, Klik form file, cari file excel yang telah disiapkan tadi dan klik import.
Kemudian lihat hasilnya, kita sudah berhasil menambahkan data user dengan fitur import excel di laravel menggunakan package excel.
Kesimpulan
Di artikel ini kita sudah mencoba bagaimana cara membuat fitur import excel di laravel menggunakan package laravel excel, dan juga melakukan pengujian membuat file excel dan mengimport dan hasil percobaan telah berhasil melakukan import.
Titip jejak
ReplyDeleteBermanfaat
ReplyDeleteTerima kasih 😁
ReplyDeletePost a Comment