~ We are changing the world with technology. ~

Matt Mullenweg

Aplikasi E-Commerce Laravel 6 #15: Complaint & Return Order

Aplikasi E-Commerce Laravel 6 #15: Complaint & Return Order

383 Dilihat

Pendahuluan

Penanganan sebelum dan sesudah penjualan sangat penting dilakukan oleh bidang usaha yang bergerak pada jasa jual beli, maka diperlukan sebuah fitur dimana customer bisa dengan mudah untuk melakukan claim return order apabila pesanan yang diterimanya tidak sesuai dengan apa yang ditawarkan oleh penjual. Selain itu, fitur untuk menandai barang apabila sudah diterima oleh customer juga penting bagi pemilik usaha agar mengetahui layanan yang diberikannya sudah selesai.

Seri membuat aplikasi e-commerce laravel 6 kali ini akan membahas beberapa hal, diantaranya, memperbaiki error dari seri artikel sebelumnya, membuat fitur approve order untuk memastikan pesanan sudah selesai dan auto approve dalam waktu +15 hari setelah barang dikirim untuk menghindari jika customer lupa untuk melakukan konfirmasi, dan yang terakhir adalah fasilitas untuk complaint serta meminta return order dengan ketentuan customer mengirimkan alasan dilengkapi foto barang pesanan.

Baca Juga: Aplikasi E-Commerce Laravel 6 #14: Kelola Pesanan (Admin) & Broadcast Resi

[Issue] Checkout Page

Masalah yang dihadapi adalah pada seri sebelumnya kita membuat kolom input-an email otomatis terisi apabila customer sudah login, masalahnya adalah akan terjadi error ketika customer belum login, maka buka file ecommerce/checkout.blade.php dan modifikasi pada bagian kolom email.

<div class="col-md-6 form-group p_star">
    <label for="">Email</label>
    @if (auth()->guard('customer')->check())
    <input type="email" class="form-control" id="email" name="email" 
        value="{{ auth()->guard('customer')->user()->email }}" 
        required {{ auth()->guard('customer')->check() ? 'readonly':'' }}>
    @else
    <input type="email" class="form-control" id="email" name="email"
        required>
    @endif
    <p class="text-danger">{{ $errors->first('email') }}</p>
</div>

Approve Order By Customer

Ketika customer mengakses halaman untuk melihat seluruh list pesanan yang dimilikinya, maka sebuah tombol untuk menandai pesanan sudah diterima atau belum akan muncul disaat pesanan tersebut ber-status shippping (red: 3). Tahap pertama kita buat tombolnya terlebih dahulu, buka file ecommerce/orders/index.blade.php dan modifikasi tag yang ada di kolom button.

<form action="{{ route('customer.order_accept') }}" 
    class="form-inline"
    onsubmit="return confirm('Kamu Yakin?');" method="post">
    @csrf

    <!-- TOMBOL VIEW ORDER KITA BUNGKUS JG DENGAN FORM AGAR RAPI -->
    <a href="{{ route('customer.view_order', $row->invoice) }}" class="btn btn-primary btn-sm mr-1">Detail</a>
  
    <input type="hidden" name="order_id" value="{{ $row->id }}">
    @if ($row->status == 3)
        <button class="btn btn-success btn-sm">Terima</button>
        <!-- TOMBOL RETURN AKAN DITEMPATKAN DISINI PADA SUB-BAB SELANJUTNYA -->
    @endif
</form>

Penjelasan: Jadi kita menggunakan onsubmit pada form, dimana fungsi ini akan menampilkan popup konfirmasi sebelum mengirimkan form request. Kemudian data yang dikirimkan hanya order_id karena data berdasarkan id ini akan diubah status-nya menjadi 4 atau diterima.

Masih dengan file yang sama, tambahkan alert success berikut ini setelah alert danger di dalam class card-body.

@if (session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif

Tugas selanjutnya adalah meng-handle request yang dikirimkan oleh customer, buka file Ecommerce/OrderController dan tambahkan method

public function acceptOrder(Request $request)
{
    //CARI DATA ORDER BERDASARKAN ID
    $order = Order::find($request->order_id);
    //VALIDASI KEPEMILIKAN
    if (!\Gate::forUser(auth()->guard('customer')->user())->allows('order-view', $order)) {
        return redirect()->back()->with(['error' => 'Bukan Pesanan Kamu']);
    }

    //UBAH STATUSNYA MENJADI 4
    $order->update(['status' => 4]);
    //REDIRECT KEMBALI DENGAN MENAMPILKAN ALERT SUCCESS
    return redirect()->back()->with(['success' => 'Pesanan Dikonfirmasi']);
}

Definisikan routing dari method di atas, buka file routes/web.php dan tambahkan baris berikut di dalam routing group yang menggunakan middleware customer

Route::post('orders/accept', '[email protected]')->name('customer.order_accept');

Return Order

Skenario dari fitur ini adalah sebuah tombol return akan ditampilkan apabila status order sama dengan 3 atau shipping & belum pernah di-return sebelumnya, kemudian apabila tombol tersebut di-klik maka akan diarahkan ke halaman yang berisi sebuah form untuk memasukkan informasi terkait return dari produk tersebut.

Tahapan pertama adalah membuat tombolnya terlebih dahulu, buka file ecommerce/orders/index.blade.php dan modifikasi kembali kolom untuk menampilkan tombol menjadi

<form action="{{ route('customer.order_accept') }}" 
    class="form-inline"
    onsubmit="return confirm('Kamu Yakin?');" method="post">
    @csrf

    <a href="{{ route('customer.view_order', $row->invoice) }}" class="btn btn-primary btn-sm mr-1">Detail</a>
    <input type="hidden" name="order_id" value="{{ $row->id }}">

  	<!-- KONDISINYA DITAMBAHKAN, JIKA RETURN_COUNT = 0 -->
    @if ($row->status == 3 && $row->return_count == 0)
        <button class="btn btn-success btn-sm">Terima</button>
        <!-- TOMBOL UNTUK MENGARAH KE HALAMAN RETURN -->
        <a href="{{ route('customer.order_return', $row->invoice) }}" class="btn btn-danger btn-sm mt-1">Return</a>
    @endif
</form>

Mungkin ada pertanyaan, return_count di dapatkan dari mana? Dari code berikut yang akan kita lengkapi, dimana data tersebut adalah jumlah data yang berelasi dengan order terkait. Buat relasinya terlebih dahulu, buka file Order.php dan tambahkan method

public function return()
{
    return $this->hasOne(OrderReturn::class);
}

Untuk me-load relasi diatas, buka file Ecommerce/OrderController.php dan cari method index() lalu modifikasi menjadi

public function index()
{
    $orders = Order::withCount(['return'])->where('customer_id', auth()->guard('customer')->user()->id)
        ->orderBy('created_at', 'DESC')->paginate(10);
    return view('ecommerce.orders.index', compact('orders'));
}

Note: Ditambahkan withCount() untuk menghasilkan objek baru dengan format namarelasi_count.

Adapun untuk langkah selanjutnya adalah masih dengan file yang sama, tambahkan method berikut untuk me-load view form return.

public function returnForm($invoice)
{
    //LOAD DATA BERDASARKAN INVOICE
    $order = Order::where('invoice', $invoice)->first();
    //LOAD VIEW RETURN.BLADE.PHP DAN PASSING DATA ORDER
    return view('ecommerce.orders.return', compact('order'));
}

Buat file baru bernama return.blade.php di dalam folder ecommerce/orders dan tambahkan tag berikut

@extends('layouts.ecommerce')

@section('title')
    <title>Return {{ $order->invoice }} - DW Ecommerce</title>
@endsection

@section('content')
    <!--================Home Banner Area =================-->
	<section class="banner_area">
		<div class="banner_inner d-flex align-items-center">
			<div class="container">
				<div class="banner_content text-center">
					<h2>Return {{ $order->invoice }}</h2>
					<div class="page_link">
            <a href="{{ url('/') }}">Home</a>
            <a href="{{ route('customer.orders') }}">Return {{ $order->invoice }}</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<section class="login_box_area p_120">
		<div class="container">
			<div class="row">
				<div class="col-md-3">
					@include('layouts.ecommerce.module.sidebar')
				</div>
				<div class="col-md-9">
          <div class="card">
              <div class="card-body">
                  @if (session('success'))
                      <div class="alert alert-success">{{ session('success') }}</div>
                  @endif

                  @if (session('error'))
                      <div class="alert alert-danger">{{ session('error') }}</div>
                  @endif

                  <form action="{{ route('customer.return', $order->id) }}" method="post" enctype="multipart/form-data">
                      @csrf
                      <input type="hidden" name="_method" value="PUT">
                      <div class="form-group">
                          <label for="">Alasan Return</label>
                          <textarea name="reason" cols="5" rows="5" class="form-control" required></textarea>
                      </div>
                      <div class="form-group">
                          <label for="">Refund Transfer</label>
                          <input type="text" name="refund_transfer" class="form-control" required>
                      </div>
                      <div class="form-group">
                          <label for="">Foto</label>
                          <input type="file" name="photo" class="form-control" required>
                      </div>
                      <button class="btn btn-primary">Kirim</button>
                  </form>
              </div>
          </div>
				</div>
			</div>
		</div>
	</section>
@endsection

Penjelasan: Jadi code di atas adalah tag untuk menampilkan form inputan yang terdiri dari alasan complaint, tujuan pengembalian dana apabila return disetujui, dan yang terakhir adalah foto barang yang di-complaint.

Saatnya untuk meng-handle permintaan yang dikirimkan, adapun routing-nya akan dibuat bersamaan dengan routing proses complaint agar tidak bolak-balik membuka file routing. Di dalam file Ecommerce/OrderController.php tambahkan method

public function processReturn(Request $request, $id)
{
    //LAKUKAN VALIDASI DATA
    $this->validate($request, [
        'reason' => 'required|string',
        'refund_transfer' => 'required|string',
        'photo' => 'required|image|mimes:jpg,png,jpeg'
    ]);

    //CARI DATA RETURN BERDASARKAN order_id YANG ADA DITABLE ORDER_RETURNS NANTINYA
    $return = OrderReturn::where('order_id', $id)->first();
    //JIKA DITEMUKAN, MAKA TAMPILKAN NOTIFIKASI ERROR
    if ($return) return redirect()->back()->with(['error' => 'Permintaan Refund Dalam Proses']);

    //JIKA TIDAK, LAKUKAN PENGECEKAN UNTUK MEMASTIKAN FILE FOTO DIKIRIMKAN
    if ($request->hasFile('photo')) {
        //GET FILE
        $file = $request->file('photo');
        //GENERATE NAMA FILE BERDASARKAN TIME DAN STRING RANDOM
        $filename = time() . Str::random(5) . '.' . $file->getClientOriginalExtension();
        //KEMUDIAN UPLOAD KE DALAM FOLDER STORAGE/APP/PUBLIC/RETURN
        $file->storeAs('public/return', $filename);

        //DAN SIMPAN INFORMASINYA KE DALAM TABLE ORDER_RETURNS
        OrderReturn::create([
            'order_id' => $id,
            'photo' => $filename,
            'reason' => $request->reason,
            'refund_transfer' => $request->refund_transfer,
            'status' => 0
        ]);
        //LALU TAMPILKAN NOTIFIKASI SUKSES
        return redirect()->back()->with(['success' => 'Permintaan Refund Dikirim']);
    }
}

Jangan lupa untuk menambahkan use statement

use App\OrderReturn;
use Illuminate\Support\Str;

Dua langkah terakhir, kita definisikan routing-nya dengan menambahkan baris route berikut di dalam routes/web.php

Route::get('orders/return/{invoice}', '[email protected]')->name('customer.order_return');
Route::put('orders/return/{invoice}', '[email protected]')->name('customer.return');

Dan bagian terakhir adalah men-generate table-nya, pada command line, jalankan command

php artisan make:model OrderReturn -m

Kemudian buka file migration yang baru saja di-generate dan modifikasi menjadi

<?php

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

class CreateOrderReturnsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('order_returns', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->unsignedBigInteger('order_id');
            $table->string('photo');
            $table->text('reason');
            $table->string('refund_transfer');
            $table->char('status', 1)->default(0)->comment('0: pending, 1: approve, 2: cancel');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('order_returns');
    }
}

Lalu di dalam file OrderReturn.php juga modifikasi dengan menambahkan sebaris code berikut untuk mengizinkan mass assignment menambahkan record baru.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class OrderReturn extends Model
{
    protected $guarded = [];
}

aplikasi ecommerce laravel 6 - return order

Baca Juga: Aplikasi E-Commerce Laravel 6 #13: Membuat Faktur PDF

Kesimpulan

Seluruh proses yang dibutuhkan dari sisi customer sudah dipenuhi, sehingga proses verifikasi return order akan dikerjakan dari sisi administrator dan fitur ini akan dikerjakan pada artikel berikutnya. Sepanjang artikel ini kita sudah belajar bagaimana menciptakan alur baru yang tidak ada di-schema database pada seri pertama dimana pesannya adalah bahwa keadaan apapun mungkin terjadi sesuai dengan perkembangan bisnis, maka sebagai seorang programmer kita harus bisa memahami kemana alur bisnis berjalan dan menerjemahkannya ke dalam code agar dapat diwujudkan dalam bentuk aplikasi.

Adapun dokumentasi code dari artikel di atas bisa dilihat di Github.

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Aplikasi E-Commerce Laravel 6 #18: Membuat Fitur Afiliasi Laravel

Aplikasi E-Commerce Laravel 6 #18: Membu...

Beragam cara atau teknik penjualan dilakukan guna mendongkrak transaksi pada sebuah bidang usaha, termasuk salah satu teknik marketing yang banyak digunakan adalah afiliasi. Berikut adalah cara membua...

Aplikasi E-Commerce Laravel 6 #17: Laporan Periode Date Range Laravel

Aplikasi E-Commerce Laravel 6 #17: Lapor...

Laporan memiliki peranan penting dalam mengevaluasi sebuah bisnis, termasuk dalam hal ini adalah transaksi jual beli. Fitur ini tidak lebih dari sekedar feed order, akan tetapi ada pembaca DaengWeb ya...

Aplikasi E-Commerce Laravel 6 #16: Integrasi Telegram Bot Laravel

Aplikasi E-Commerce Laravel 6 #16: Integ...

Membuat notifikasi dalam bentuk sosial chat akan lebih cepat tersampaikan kepada pemilik aplikasi karena di era ini orang-orang banyak menghabiskan waktunya dengan sosial media / chat. Berikut adalah...

Komentar