Pada kesempatan kali ini saya akan membagikan bagaimana cara membuat CRUD Image dilaravel ^_^
Sebenarnya sudah banyak mengenai tulisan bagaimana membuat CRUD dilaravel, tapi tidak ada salahnya saya mencoba, guru SD saya pernah bilang "ikatlah ilmu dengan tulisan" ^_^
Pada tulisan ini saya menggunakan project kasus yang sedang dikerjakan, jadi ada beberapa yang sudah berelasi dengan table lainnya.. mudah-mudahan tetap bisa jadi bahan referensi untuk pembaca semua.. ATM (Amati Tiru Modifikasi) ^_^
Kita harus sudah mempunyai schema migration nya terlebih dahulu
public function up()
{
Schema::create('testimony_customers', function (Blueprint $table) {
$table->bigIncrements('id');
$table->unsignedBigInteger('customer_id');
$table->string('subject');
$table->string('image')->nullable();
$table->integer('star')->nullable();
$table->timestamps();
$table->foreign('customer_id')->references('id')->on('customers')
->onUpdate('cascade')->onDelete('cascade');
});
}kita buat sebuah routes nya, untuk controller dan modelnya sebagian pembaca pasti sudah paham bagaimana cara untuk membuatnya, jadi disini kita skip soal itu
Route::resource('testimony-customer', 'TestimonyCustomerController');untuk bagian Controller nya kurang lebih seperti ini pada bagian index nya
public function index(Request $request)
{
if (\Auth::user()->can('manage-testimony-customer')) {
if ($request->ajax()) {
$testimony_customer = TestimonyCustomer::with('customer')->select();
return DataTables::of($testimony_customer)
->addColumn('action', function ($testimony_customer) {
return view('datatable._action', [
'model' => $testimony_customer,
'form_url' => route('testimony-customer.destroy',
$testimony_customer->id),
'edit_url' => route('testimony-customer.edit',
$testimony_customer->id),
'can_edit' => 'edit-testimony-customer',
'can_delete' => 'delete-testimony-customer',
'confirm_message' => 'Apakah anda yakin ?'
]);
})
->editColumn('star', function ($testimony_customer) {
$star = '';
for ($i = 0; $i < $testimony_customer->star; $i++) {
$star .= '<i class="mdi mdi-star text-warning mdi-18px">
</i>';
}
return $star;
})
->editColumn('image', function ($testimony_customer) {
$url = asset('storage/testimony-customer/' .
$testimony_customer->image);
return '<img src="' . $url . '" border="0" width="60"
class="img-rounded" align="center" />';
})
->rawColumns(['image', 'star'])
->make(true);
}
return view('testimony-customer.index');
} else {
return redirect()->back()->with('error', __('Permission denied.'));
}
}Pada bagian dibawah ini, saya menggunakan laratrust untuk permission nya, mungkin pembaca lebih mengetahui dan lebih paham, jadi abaikan saja kita karena diluar pembahasan tulisan ini
if (\Auth::user()->can('manage-testimony-customer'))Untuk menampilkan hasil gambar yang sudah disave, saya menggunakan ini dan gambar disimpan difolder storage/testimony-customer
->editColumn('image', function ($testimony_customer) {
$url = asset('storage/testimony-customer/' . $testimony_customer->image);
return '<img src="' . $url . '" border="0" width="60" class="img-rounded"
align="center" />';
})Untuk view nya sendiri saya membuat sebuah folder testimony-customer
Pada index.blade.php, kurang lebih seperti ini untuk menampilkan data-datanya
@extends('layouts.backend.layouts.app')
@section('page-title')
{{__('Testimony Customer')}}
@endsection
@section('content')
<div class="content">
<div class="container-fluid">
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-sm-6">
<h4 class="page-title">Testimony Customer</h4>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-right">
<li class="breadcrumb-item"><a
href="javascript:void(0);">MENU</a></li>
<li class="breadcrumb-item active">Testimony Customer</li>
</ol>
</div>
</div> <!-- end row -->
</div>
<!-- end page-title -->
<div class="row">
<div class="col-12">
<div class="card m-b-30">
<div class="card-body">
@permission('create-testimony-customer')
<a href="{{ route('testimony-customer.create') }}"><button
type="button" class="btn btn-primary waves-effect waves-
light">
<i class="mdi mdi-gamepad-round"></i> Tambah</button>
</a>
@endpermission()
<br/>
<br/>
<table id="testimony-customer" class="table-sm table-striped
table-bordered" style="border-collapse: collapse; border-
spacing: 0; width: 100%;">
<thead>
<tr>
<th>#</th>
<th>Nama Customer</th>
<th>Subject</th>
<th>Image</th>
<th>Start</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div> <!-- end col -->
</div>
<!-- end row -->
</div>
</div>
@endsection
@section('script')
<script src="{{ asset('assets-
backend/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{ asset('assets-
backend/plugins/datatables/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{ asset('assets-
backend/plugins/datatables/dataTables.responsive.min.js')}}"></script>
<script src="{{ asset('assets-
backend/plugins/datatables/responsive.bootstrap4.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#testimony-customer').DataTable({
processing: true,
serverSide: true,
ajax: '{{ route('testimony-customer.index')}}',
columns: [
{ data: 'id', name: 'id' },
{ data: 'customer.name', name: 'customer.name' },
{ data: 'subject', name: 'subject' },
{ data: 'image', name: 'image' },
{ data: 'star', name: 'star' },
{ data: 'action', name: 'action', orderable: false, searchable:
false },
],
order: [[ 0, 'desc' ]],
});
});
</script>
@endsection
Dan tampilan nya seperti ini
Untuk Controller create nya seperti ini
public function create()
{
if (\Auth::user()->can('create-testimony-customer')) {
return view('testimony-customer.create');
} else {
return redirect()->back()->with('error', __('Permission denied.'));
}
}Untuk create.blade.php nya
@extends('layouts.backend.layouts.app')
@section('page-title')
{{__('Tambah Testimony Customer')}}
@endsection
@section('content')
<div class="content">
<div class="container-fluid">
<div class="page-title-box">
<div class="row align-items-center">
<div class="col-sm-6">
<h4 class="page-title">Testimony Customer</h4>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-right">
<li class="breadcrumb-item">Menu</li>
<li class="breadcrumb-item active"><a href="{{ route('testimony-
customer.index') }}">Testimony Customer</a></li>
<li class="breadcrumb-item active">Tambah</li>
</ol>
</div>
</div> <!-- end row -->
</div>
<!-- end page-title -->
<div class="row">
<div class="col-lg-8">
<div class="card m-b-30">
<div class="card-body">
{!! Form::open(['url' => route('testimony-customer.store'),
'class' => 'form-horizontal', 'enctype=multipart/form-data'])
!!}
@include('testimony-customer._form')
{!! Form::close() !!}
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Jangan lupa tambahkan 'enctype=multipart/form-data' pada form html nya seperti diatas..
Dan untuk _form.blade.php nya kurang lebih seperti ini tampilan form pada file image nya, sebenarnya masih ada form yang lainnya, seperti (nama_customer, subject, star) disini saya akan lebih memfokuskan ke form image nya saja
<div class="form-group row">
<div class="col-lg-6">
<h6>{{__('Image')}}</h6>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="height: 150px;">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width:
200px; max-height: 150px; line-height: 10px;"></div>
<div>
<span class="btn btn-primary btn-file">
<span class="fileinput-new"> {{__('Select image')}} </span>
<span class="fileinput-exists"> {{__('Change')}} </span>
<input type="hidden">
<input type="file" name="image" id="image">
</span>
<a href="javascript:;" class="btn btn-danger fileinput-exists" data-
dismiss="fileinput"> {{__('Remove')}} </a>
</div>
</div>
</div>
</div>Dan ketika file image dipilih pada _form.blade.php diatas, kurang lebih seperti pada gambar dibawah ini untuk tampilannya sendiri
Pada Controller store nya
if ($request->file('image')) {
$uploadfile = $request->file('image');
$filename = $uploadfile->hashName();
$file = $uploadfile->store('testimony-customer', 'public');
$testimony_customer->image = $filename;
}Dan ketika kita berhasil mengupload sebuah gambar, maka akan otomatis ada sebuah folder baru di storage dengan nama testimony-customer (sesuai dengan apa penamaan yang kita kasih)
Pada Controller edit nya
public function edit($id)
{
if (\Auth::user()->can('edit-testimony-customer')) {
$testimony_customer = TestimonyCustomer::find($id);
return view('testimony-customer.edit', compact('testimony_customer'));
} else {
return redirect()->back()->with('error', __('Permission denied.'));
}
}Untuk edit.blade.php
Pada Controller update nya
if ($request->file('image')) {
if ($testimony_customer->image && file_exists(storage_path('app/public/testimony-
customer/' . $testimony_customer->image))) {
\Storage::delete('public/testimony-customer/' . $testimony_customer->image);
}
$uploadfile = $request->file('image');
$filename = $uploadfile->hashName();
$file = $uploadfile->store('testimony-customer', 'public');
$testimony_customer->image = $filename;
}DONE . . !!!
untuk hasil ahirnya kurang lebih seperti dibawah ini
Terimakasih sebelumnya, saya ucapkan haturnuhun
Comments