~ We are changing the world with technology. ~

Matt Mullenweg

Aplikasi E-Commerce Laravel 6 #9: Customer Transactions

Aplikasi E-Commerce Laravel 6 #9: Customer Transactions

800 Dilihat

Pendahuluan

Mencatat data pesanan pelanggan yang sebelumnya telah disimpan ke dalam cookie, kini akan kita lengkapi dengan data pribadi pelanggan terkait untuk kemudian disimpan secara pasti ke dalam database. Proses transaksi ini membutuhkan effort berlebih karena kita akan berinteraksi dengan beberapa table sehingga proses ini terbilang cukup kompleks.

Schema yang diinginkan adalah ketika user telah menambahkan produk yang diinginkan ke dalam keranjang, maka pada halaman keranjang terdapat tombol untuk mengarahkannya ke halaman form transaksi sehingga calon pelanggan bisa memasukkan informasi terkait data dirinya.

Baca Juga: Aplikasi E-commerce Laravel 6 #8: Manage Carts

Fix Carts Issue

Terdapat sedikit kendala ketika data di cookie kosong yang berarti hasilnya akan null, maka akan terjadi error pada halaman keranjang belanja. Untuk mengatasi masalah ini sebenarnya cukup dengan menggunakan ternary operator pada php untuk mengecek jika datanya tidak sama dengan null (dan atau kosong) maka data tersebut akan disimpan kedalam variable, tapi jika berlaku sebaliknya maka kita berikan array kosong.

Karena fungsi ini cukup sering digunakan, maka akan kita pisahkan ke dalam sebuah fungsi tersendiri agar code dengan logic yang sama tidak dituliskan secara berulang. Buka file CartController.php dan tambahkan method berikut.

private function getCarts()
{
    $carts = json_decode(request()->cookie('dw-carts'), true);
    $carts = $carts != '' ? $carts:[];
    return $carts;
}

Masih dengan file yang sama, replace semua code $carts = json_decode(request()->cookie('dw-carts'), true); menjadi

$carts = $this->getCarts();

Form Transactions

Menyiapkan form transaksi adalah langkah selanjutnya dari proses membuat aplikasi e-commerce menggunakan Laravel 6, dimana fungsinya adalah untuk mencatat pesanan yang akan dilakukan oleh pelanggan. Adapun data produk yang akan dipesan telah disimpan ke dalam Cookie yang selanjutnya akan dimasukkan ke dalam database, kemudian data yang ada pada cookie akan dibersihkan.

Langkah pertama adalah membuat tampilannya, buka file CartController.php dan tambahkan method berikut.

public function checkout()
{
    //QUERY UNTUK MENGAMBIL SEMUA DATA PROPINSI
    $provinces = Province::orderBy('created_at', 'DESC')->get();
    $carts = $this->getCarts(); //MENGAMBIL DATA CART
    //MENGHITUNG SUBTOTAL DARI KERANJANG BELANJA (CART)
    $subtotal = collect($carts)->sum(function($q) {
        return $q['qty'] * $q['product_price'];
    });
    //ME-LOAD VIEW CHECKOUT.BLADE.PHP DAN PASSING DATA PROVINCES, CARTS DAN SUBTOTAL
    return view('ecommerce.checkout', compact('provinces', 'carts', 'subtotal'));
}

Jangan lupa untuk menambahkan use statement.

use App\Province;

Kemudian buat sebuah file bernama checkout.blade.php dan letakkan ke dalam folder resources/views/ecommerce. Masukkan code berikut untuk meng-handle form transaksi

@extends('layouts.ecommerce')

@section('title')
    <title>Checkout - Dw Ecommerce</title>
@endsection

@section('content')
    <!--================Home Banner Area =================-->
	<section class="banner_area">
		<div class="banner_inner d-flex align-items-center">
			<div class="overlay"></div>
			<div class="container">
				<div class="banner_content text-center">
					<h2>Informasi Pengiriman</h2>
					<div class="page_link">
            <a href="{{ url('/') }}">Home</a>
						<a href="#">Checkout</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!--================End Home Banner Area =================-->

	<!--================Checkout Area =================-->
	<section class="checkout_area section_gap">
		<div class="container">
			<div class="billing_details">
				<div class="row">
					<div class="col-lg-8">
            <h3>Informasi Pengiriman</h3>          
              @if (session('error'))
                  <div class="alert alert-danger">{{ session('error') }}</div>
              @endif
                        
              
            	<!-- REMOVE DULU VALUE ACTION-NYA JIKA INGIN MELIHATNYA DI BROWSER -->
            	<!-- KARENA ROUTE NAME front.store_checkout BELUM DIBUAT -->
              <form class="row contact_form" action="{{ route('front.store_checkout') }}" method="post" novalidate="novalidate">
                            @csrf
                        <div class="col-md-12 form-group p_star">
                            <label for="">Nama Lengkap</label>
                            <input type="text" class="form-control" id="first" name="customer_name" required>
                            
                            <!-- UNTUK MENAMPILKAN JIKA TERDAPAT ERROR VALIDASI -->
                            <p class="text-danger">{{ $errors->first('customer_name') }}</p>
                        </div>
                        <div class="col-md-6 form-group p_star">
                            <label for="">No Telp</label>
                            <input type="text" class="form-control" id="number" name="customer_phone" required>
                            <p class="text-danger">{{ $errors->first('customer_phone') }}</p>
                        </div>
                        <div class="col-md-6 form-group p_star">
                            <label for="">Email</label>
                            <input type="email" class="form-control" id="email" name="email" required>
                            <p class="text-danger">{{ $errors->first('email') }}</p>
                        </div>
                        <div class="col-md-12 form-group p_star">
                            <label for="">Alamat Lengkap</label>
                            <input type="text" class="form-control" id="add1" name="customer_address" required>
                            <p class="text-danger">{{ $errors->first('customer_address') }}</p>
                        </div>
                        <div class="col-md-12 form-group p_star">
                            <label for="">Propinsi</label>
                            <select class="form-control" name="province_id" id="province_id" required>
                                <option value="">Pilih Propinsi</option>
                              	<!-- LOOPING DATA PROVINCE UNTUK DIPILIH OLEH CUSTOMER -->
                                @foreach ($provinces as $row)
                                <option value="{{ $row->id }}">{{ $row->name }}</option>
                                @endforeach
                            </select>
                            <p class="text-danger">{{ $errors->first('province_id') }}</p>
                        </div>
                
                  <!-- ADAPUN DATA KOTA DAN KECAMATAN AKAN DI RENDER SETELAH PROVINSI DIPILIH -->
                        <div class="col-md-12 form-group p_star">
                            <label for="">Kabupaten / Kota</label>
                            <select class="form-control" name="city_id" id="city_id" required>
                                <option value="">Pilih Kabupaten/Kota</option>
                            </select>
                            <p class="text-danger">{{ $errors->first('city_id') }}</p>
                        </div>
                        <div class="col-md-12 form-group p_star">
                            <label for="">Kecamatan</label>
                            <select class="form-control" name="district_id" id="district_id" required>
                                <option value="">Pilih Kecamatan</option>
                            </select>
                            <p class="text-danger">{{ $errors->first('district_id') }}</p>
                        </div>
                <!-- ADAPUN DATA KOTA DAN KECAMATAN AKAN DI RENDER SETELAH PROVINSI DIPILIH -->
                    
					</div>
					<div class="col-lg-4">
						<div class="order_box">
							<h2>Ringkasan Pesanan</h2>
							<ul class="list">
								<li>
									<a href="#">Product
										<span>Total</span>
									</a>
                </li>
                @foreach ($carts as $cart)
								<li>
									<a href="#">{{ \Str::limit($cart['product_name'], 10) }}
                    <span class="middle">x {{ $cart['qty'] }}</span>
                    <span class="last">Rp {{ number_format($cart['product_price']) }}</span>
									</a>
                </li>
                @endforeach
							</ul>
							<ul class="list list_2">
								<li>
									<a href="#">Subtotal
                    <span>Rp {{ number_format($subtotal) }}</span>
									</a>
								</li>
								<li>
									<a href="#">Pengiriman
										<span>Rp 0</span>
									</a>
								</li>
								<li>
									<a href="#">Total
										<span>Rp {{ number_format($subtotal) }}</span>
									</a>
								</li>
							</ul>
              <button class="main_btn">Bayar Pesanan</button>
              </form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!--================End Checkout Area =================-->
@endsection

Definisikan route-nya agar bisa diakses, buka file routes/web.php dan tambahkan code berikut

Route::get('/checkout', 'Ecommerce\[email protected]')->name('front.checkout');

Langkah terakhir pada sub-bab ini adalah dengan menghubungkan tombol Proceed to checkout ke halaman checkout. Buka file cart.blade.php dan cari kalimat Proceed to checkout kemudian modifikasi tag-nya menjadi.

<a class="gray_btn" href="{{ route('front.product') }}">Continue Shopping</a>
<a class="main_btn" href="{{ route('front.checkout') }}">Proceed to checkout</a>

Dynamic Option With Ajax

Ketika select box province dipilih maka secara otomatis akan me-render data kabupaten atau kota pada select box berikutnya. Tugas kita kali ini adalah membuat fitur tersebut dengan memanfaatkan ajax pada jquery.

Buka file resources/views/layouts/ecommerce.blade.php dan tambahkan code di bawah ini tepat sebelum tag </body>

@yield('js')

Gunanya adalah view yang me-load layouts diatas bisa menambahkan custom javascript khusus pada halaman yang sedang menggunakannya, cara kerja-nya sama dengan cara kerja @yield('content') dan sebagainya.

Kembali pada file checkout.blade.php, tambahkan code berikut pada line atau baris terakhir

@section('js')
    <script>
        //KETIKA SELECT BOX DENGAN ID province_id DIPILIH
        $('#province_id').on('change', function() {
            //MAKA AKAN MELAKUKAN REQUEST KE URL /API/CITY
            //DAN MENGIRIMKAN DATA PROVINCE_ID
            $.ajax({
                url: "{{ url('/api/city') }}",
                type: "GET",
                data: { province_id: $(this).val() },
                success: function(html){
                    //SETELAH DATA DITERIMA, SELEBOX DENGAN ID CITY_ID DI KOSONGKAN
                    $('#city_id').empty()
                    //KEMUDIAN APPEND DATA BARU YANG DIDAPATKAN DARI HASIL REQUEST VIA AJAX
                    //UNTUK MENAMPILKAN DATA KABUPATEN / KOTA
                    $('#city_id').append('<option value="">Pilih Kabupaten/Kota</option>')
                    $.each(html.data, function(key, item) {
                        $('#city_id').append('<option value="'+item.id+'">'+item.name+'</option>')
                    })
                }
            });
        })

        //LOGICNYA SAMA DENGAN CODE DIATAS HANYA BERBEDA OBJEKNYA SAJA
        $('#city_id').on('change', function() {
            $.ajax({
                url: "{{ url('/api/district') }}",
                type: "GET",
                data: { city_id: $(this).val() },
                success: function(html){
                    $('#district_id').empty()
                    $('#district_id').append('<option value="">Pilih Kecamatan</option>')
                    $.each(html.data, function(key, item) {
                        $('#district_id').append('<option value="'+item.id+'">'+item.name+'</option>')
                    })
                }
            });
        })
    </script>
@endsection

Ada dua request dari code di atas, yakni: /api/city dan /api/district. Kita lengkapi satu persatu, buka file CartController.php dan tambahkan method

public function getCity()
{
    //QUERY UNTUK MENGAMBIL DATA KOTA / KABUPATEN BERDASARKAN PROVINCE_ID
    $cities = City::where('province_id', request()->province_id)->get();
    //KEMBALIKAN DATANYA DALAM BENTUK JSON
    return response()->json(['status' => 'success', 'data' => $cities]);
}

public function getDistrict()
{
    //QUERY UNTUK MENGAMBIL DATA KECAMATAN BERDASARKAN CITY_ID
    $districts = District::where('city_id', request()->city_id)->get();
    //KEMUDIAN KEMBALIKAN DATANYA DALAM BENTUK JSON
    return response()->json(['status' => 'success', 'data' => $districts]);
}

Jangan lupa untuk menambahkan use statement.

use App\City;
use App\District;

Kemudian definisikan routing-nya, buka file routes/api.php dan tambahkan code

Route::get('city', 'Ecommerce\[email protected]'); //ROUTE API UNTUK /CITY
Route::get('district', 'Ecommerce\[email protected]'); //ROUTE API UNTUK /DISTRICT

Bagian terakhir ada memodifikasi file public/ecommerce/js/theme.js dan hapus code.

$('select').niceSelect();

Make Transactions

Form transaksi telah tersedia, dimana tampilan tersebut memungkinkan user untuk memasukkan informasi pesanannya yang meliputi nama pelanggan, alamat dan sebagainya. Pada bagian ini tugas kita adalah meng-handle data yang dikirimkan dari form tersebut. Buka file CartController.php dan tambahkan method berikut

public function processCheckout(Request $request)
{
    //VALIDASI DATANYA
    $this->validate($request, [
        'customer_name' => 'required|string|max:100',
        'customer_phone' => 'required',
        'email' => 'required|email',
        'customer_address' => 'required|string',
        'province_id' => 'required|exists:provinces,id',
        'city_id' => 'required|exists:cities,id',
        'district_id' => 'required|exists:districts,id'
    ]);

    //INISIASI DATABASE TRANSACTION
    //DATABASE TRANSACTION BERFUNGSI UNTUK MEMASTIKAN SEMUA PROSES SUKSES UNTUK KEMUDIAN DI COMMIT AGAR DATA BENAR BENAR DISIMPAN, JIKA TERJADI ERROR MAKA KITA ROLLBACK AGAR DATANYA SELARAS
    DB::beginTransaction();
    try {
        //CHECK DATA CUSTOMER BERDASARKAN EMAIL
        $customer = Customer::where('email', $request->email)->first();
        //JIKA DIA TIDAK LOGIN DAN DATA CUSTOMERNYA ADA
        if (!auth()->check() && $customer) {
            //MAKA REDIRECT DAN TAMPILKAN INSTRUKSI UNTUK LOGIN 
            return redirect()->back()->with(['error' => 'Silahkan Login Terlebih Dahulu']);
        }

        //AMBIL DATA KERANJANG
        $carts = $this->getCarts();
        //HITUNG SUBTOTAL BELANJAAN
        $subtotal = collect($carts)->sum(function($q) {
            return $q['qty'] * $q['product_price'];
        });

        //SIMPAN DATA CUSTOMER BARU
        $customer = Customer::create([
            'name' => $request->customer_name,
            'email' => $request->email,
            'phone_number' => $request->customer_phone,
            'address' => $request->customer_address,
            'district_id' => $request->district_id,
            'status' => false
        ]);

        //SIMPAN DATA ORDER
        $order = Order::create([
            'invoice' => Str::random(4) . '-' . time(), //INVOICENYA KITA BUAT DARI STRING RANDOM DAN WAKTU
            'customer_id' => $customer->id,
            'customer_name' => $customer->name,
            'customer_phone' => $request->customer_phone,
            'customer_address' => $request->customer_address,
            'district_id' => $request->district_id,
            'subtotal' => $subtotal
        ]);

        //LOOPING DATA DI CARTS
        foreach ($carts as $row) {
            //AMBIL DATA PRODUK BERDASARKAN PRODUCT_ID
            $product = Product::find($row['product_id']);
            //SIMPAN DETAIL ORDER
            OrderDetail::create([
                'order_id' => $order->id,
                'product_id' => $row['product_id'],
                'price' => $row['product_price'],
                'qty' => $row['qty'],
                'weight' => $product->weight
            ]);
        }
        
        //TIDAK TERJADI ERROR, MAKA COMMIT DATANYA UNTUK MENINFORMASIKAN BAHWA DATA SUDAH FIX UNTUK DISIMPAN
        DB::commit();

        $carts = [];
        //KOSONGKAN DATA KERANJANG DI COOKIE
        $cookie = cookie('dw-carts', json_encode($carts), 2880);
        //REDIRECT KE HALAMAN FINISH TRANSAKSI
        return redirect(route('front.finish_checkout', $order->invoice))->cookie($cookie);
    } catch (\Exception $e) {
        //JIKA TERJADI ERROR, MAKA ROLLBACK DATANYA
        DB::rollback();
        //DAN KEMBALI KE FORM TRANSAKSI SERTA MENAMPILKAN ERROR
        return redirect()->back()->with(['error' => $e->getMessage()]);
    }
}

Jangan lupa untuk menambahkan use statement

use App\Customer;
use App\Order;
use App\OrderDetail;
use Illuminate\Support\Str;
use DB;

Definisikan routing-nya, buka file routes/web.php dan tambahkan route berikut

Route::post('/checkout', 'Ecommerce\[email protected]')->name('front.store_checkout');

Pastikan untuk mengizinkan penyimpanan data melalui Eloquent, buka file Customer.php dan modifikasi menjadi

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

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

Buka file Order.php dan modifikasi juga menjadi.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Order extends Model
{
    protected $guarded = [];
    
    //MEMBUAT RELASI KE MODEL DISTRICT.PHP
    public function district()
    {
        return $this->belongsTo(District::class);
    }
}

Selanjutnya buka file OrderDetail.php dan modifikasi menjadi

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

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

Bagian terakhir dari seri modifikasi model adalah file District.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class District extends Model
{
    //BUAT RELASI KE MODEL CITY.PHP
    public function city()
    {
        return $this->belongsTo(City::class);
    }
}

Setelah proses penyimpanan berhasil, maka prosesnya akan diarahkan ke halaman yang berfungsi untuk menampilkan summary pesanan. Buka file CartController.php dan tambahkan method

public function checkoutFinish($invoice)
{
    //AMBIL DATA PESANAN BERDASARKAN INVOICE
    $order = Order::with(['district.city'])->where('invoice', $invoice)->first();
    //LOAD VIEW checkout_finish.blade.php DAN PASSING DATA ORDER
    return view('ecommerce.checkout_finish', compact('order'));
}

Buat file checkout_finish.blade.php dan tambahkan code berikut yang berisi informasi pesanan yang baru saja dilakukan.

@extends('layouts.ecommerce')

@section('title')
    <title>Keranjang Belanja - 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>Pesanan Diterima</h2>
					<div class="page_link">
            <a href="{{ url('/') }}">Home</a>
						<a href="">Invoice</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!--================End Home Banner Area =================-->

	<!--================Order Details Area =================-->
	<section class="order_details p_120">
		<div class="container">
			<h3 class="title_confirmation">Terima kasih, pesanan anda telah kami terima.</h3>
			<div class="row order_d_inner">
				<div class="col-lg-6">
					<div class="details_item">
						<h4>Informasi Pesanan</h4>
						<ul class="list">
							<li>
								<a href="#">
                  <span>Invoice</span> : {{ $order->invoice }}</a>
							</li>
							<li>
								<a href="#">
                  <span>Tanggal</span> : {{ $order->created_at }}</a>
							</li>
							<li>
								<a href="#">
                  <span>Total</span> : Rp {{ number_format($order->subtotal) }}</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="col-lg-6">
					<div class="details_item">
						<h4>Informasi Pemesan</h4>
						<ul class="list">
							<li>
								<a href="#">
                  <span>Alamat</span> : {{ $order->customer_address }}</a>
							</li>
							<li>
								<a href="#">
                  <span>Kota</span> : {{ $order->district->city->name }}</a>
							</li>
							<li>
								<a href="#">
									<span>Country</span> : Indonesia</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</section>
  <!--================End Order Details Area =================-->
    
@endsection

Definsikan route yang terakhir, buka file routes/web.php dan tambahkan code

Route::get('/checkout/{invoice}', 'Ecommerce\[email protected]')->name('front.finish_checkout');

Baca Juga: Aplikasi E-commerce Laravel 6 #7: Filter Product Detail

Kesimpulan

Sepanjang artikel ini kita telah belajar banyak hal diantaranya bagaimana cara menyimpan data yang ada di Cookie ke dalam database, selain itu kita juga belajar bagaimana menggunakan database transaction untuk meminimalisir kesamaan data jika terjadi error ketika proses penyimpanan dilakukan pada lebih dari satu table yang saling terakait.

Adapun dokumentasi code dari artikel ini 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 #10: Multiple Authentication Laravel

Aplikasi E-Commerce Laravel 6 #10: Multi...

Laravel memulai debutnya dengan menghadirkan fitur yang sangat praktis dalam meng-handle proses authentication. Hal ini menyebabkan penggunanya mendapatkan sedikit kenyamanan karena tidak perlu lagi s...

[TIPS] Membuat Routing Maintenable di Laravel 6 Laravel

[TIPS] Membuat Routing Maintenable di La...

Satu dari sekian hal yang menjadi problematika Programmer adalah bagaimana cara menuliskan code yang maintenable, sebab aplikasi yang terus dikembangkan dari waktu ke waktu akan menemukan kompleksitas...

Aplikasi E-Commerce Laravel 6 #8: Manage Carts Laravel

Aplikasi E-Commerce Laravel 6 #8: Manage...

Transaksi menjadi bagian yang penting dalam aplikasi berbasis penjualan dan mengelola data keranjang menjadi salah satu bagian yang akan melengkapi proses pendataan transaksi yang dilakukan oleh pelan...

Komentar