Tutorial Laravel 11, Midtrans, Filament: Bikin Web Booking Event Ticket

Jika kamu seorang developer yang sedang belajar Laravel, kamu pasti tahu betapa pentingnya memiliki halaman admin yang terstruktur. Kali ini, kita akan membahas bagaimana membangun halaman admin lengkap dengan content management system (CMS) untuk sebuah projek website booking event ticket.

Dalam tutorial ini, kita akan menggunakan Laravel sebagai framework utama dan Filament sebagai alat untuk mempercepat pembuatan interface admin.

Mengapa Halaman Admin Penting dalam Web Development?

Halaman admin adalah jantung dari setiap aplikasi berbasis web yang membutuhkan pengelolaan data. Tanpa halaman admin yang baik, pengelolaan produk, pesanan, pelanggan, dan laporan penjualan akan terasa sulit dan memakan waktu. Dengan halaman admin yang terstruktur, semua aktivitas ini dapat dilakukan dengan lebih efisien dan terorganisir.

Dalam konteks web development untuk booking event ticket, halaman admin memungkinkan developer atau pengelola aplikasi untuk:

  • Mengelola produk atau event: Menambahkan, mengedit, atau menghapus event yang akan dijual tiketnya.
  • Memantau pesanan: Memantau status pesanan, seperti tiket yang sudah terjual, tiket yang masih tersedia, dan pembayaran yang sukses.
  • Mengelola pelanggan: Melihat data pelanggan, seperti nama, email, atau riwayat pembelian mereka.
  • Membuat laporan penjualan: Melihat performa penjualan dalam periode tertentu untuk analisis bisnis yang lebih baik.

Laravel dan Filament: Kombinasi untuk Admin Panel Modern

Laravel adalah salah satu framework PHP yang paling populer untuk web development. Framework ini menawarkan struktur yang rapi, fitur lengkap, dan dukungan komunitas yang besar. Sementara itu, Filament adalah library yang mempermudah developer dalam membuat admin panel modern dengan UI yang interaktif.

Dengan Filament, kita bisa membuat halaman admin yang responsif dan fungsional tanpa harus memulai semuanya dari awal. Library ini menawarkan fitur bawaan seperti manajemen data, integrasi dengan berbagai database, hingga kemampuan untuk menyesuaikan tampilan sesuai kebutuhan projekmu.

Pentingnya Integrasi Midtrans untuk Proses Pembayaran

Salah satu aspek penting dalam aplikasi booking event ticket adalah proses pembayaran. Di sini, kita akan menggunakan Midtrans sebagai payment gateway. Midtrans mempermudah developer untuk mengintegrasikan berbagai metode pembayaran seperti kartu kredit, transfer bank, dan dompet digital ke dalam aplikasi Laravel.

Dengan menggunakan Midtrans, kamu bisa:

  • Menyediakan banyak pilihan metode pembayaran untuk pelanggan.
  • Memastikan transaksi berjalan dengan aman dan terenkripsi.
  • Mempermudah proses rekonsiliasi pembayaran dengan laporan otomatis.

Integrasi Midtrans di halaman admin juga memungkinkan pengelola untuk melihat status pembayaran secara real-time, mengurangi risiko kesalahan atau fraud.

Struktur Halaman Admin yang Ideal

Untuk memaksimalkan pengalaman pengguna di halaman admin, penting untuk merancang struktur yang intuitif dan efisien. Berikut adalah beberapa elemen utama yang sebaiknya ada di halaman admin CMS untuk aplikasi booking event ticket:

  1. Dashboard Berisi ringkasan data seperti jumlah event yang tersedia, tiket yang terjual, dan total pendapatan.
  2. Manajemen Produk Fitur untuk menambah, mengedit, dan menghapus event yang akan dijual tiketnya.
  3. Manajemen Pesanan Menampilkan daftar pesanan beserta status pembayaran, jumlah tiket, dan informasi pelanggan.
  4. Manajemen Pelanggan Berisi data pelanggan, riwayat pembelian, dan preferensi mereka.
  5. Laporan Penjualan Grafik dan tabel yang menunjukkan performa penjualan, pendapatan, dan data lain untuk analisis bisnis.

Dengan struktur ini, halaman admin dapat menjadi alat yang kuat untuk mempermudah pengelolaan aplikasi booking event ticket.

Cara Membuat Projek Laravel Terbaru dan Mengatur Koneksi MySQL

Laravel adalah salah satu framework PHP yang populer dan sangat cocok untuk membangun aplikasi berbasis web. Berikut adalah panduan lengkap untuk membuat projek Laravel terbaru menggunakan Composer dan mengatur file .env untuk koneksi ke MySQL.

1. Membuat Projek Laravel Baru

Langkah pertama adalah menggunakan perintah Composer untuk membuat projek Laravel terbaru. Pastikan kamu sudah menginstal Composer di komputermu.

Jalankan perintah berikut di terminal atau command prompt:

composer create-project --prefer-dist laravel/laravel nama-projek

Ganti nama-projek dengan nama yang ingin kamu gunakan untuk projek Laravel-mu. Perintah ini akan mengunduh semua file yang diperlukan dan mengatur struktur awal projek.

2. Masuk ke Direktori Projek

Setelah proses instalasi selesai, masuk ke direktori projek yang telah dibuat:

cd nama-projek

3. Konfigurasi Koneksi Database di File .env

Setelah projek dibuat, langkah selanjutnya adalah mengatur koneksi database. Laravel menggunakan file .env untuk menyimpan konfigurasi lingkungan, termasuk detail koneksi database.

Buka file .env yang ada di direktori root projekmu, lalu cari bagian yang berkaitan dengan database. Berikut adalah contoh konfigurasi default yang perlu kamu sesuaikan:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama_database
DB_USERNAME=root
DB_PASSWORD=password_database

Berikut penjelasan masing-masing parameter:

  • DB_CONNECTION: Jenis database yang digunakan, dalam hal ini mysql.
  • DB_HOST: Alamat host database. Biasanya 127.0.0.1 untuk server lokal.
  • DB_PORT: Port yang digunakan oleh MySQL, default-nya adalah 3306.
  • DB_DATABASE: Nama database yang akan digunakan untuk projek ini.
  • DB_USERNAME: Username untuk koneksi database. Biasanya root untuk server lokal.
  • DB_PASSWORD: Password untuk user database.

Contoh file .env yang sudah disesuaikan:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=booking_event
DB_USERNAME=root
DB_PASSWORD=

Catatan: Ganti DB_DATABASE, DB_USERNAME, dan DB_PASSWORD sesuai dengan pengaturan database di servermu.

4. Membuat Database di MySQL

Pastikan kamu telah membuat database sesuai dengan nama yang diatur di file .env. Kamu bisa membuat database menggunakan command line atau tools seperti phpMyAdmin.

Jika menggunakan command line, jalankan perintah berikut:

CREATE DATABASE booking_event;

Ganti booking_event dengan nama database yang kamu gunakan.

5. Menguji Koneksi Database

Untuk memastikan bahwa konfigurasi database berhasil, jalankan perintah migrasi default Laravel. Perintah ini akan membuat tabel bawaan Laravel di database:

php artisan migrate

Jika tidak ada error yang muncul, berarti koneksi ke database sudah berhasil diatur.

Contoh File .env Lengkap

Berikut adalah contoh file .env yang sudah diatur untuk koneksi MySQL:

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:xz13abcDEFghi5678jklMNOpqrstuvWXyz9=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=booking_event
DB_USERNAME=root
DB_PASSWORD=

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DRIVER=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="${APP_NAME}"

Setelah semua langkah ini selesai, projek Laravel-mu sudah siap terhubung dengan database MySQL, dan kamu dapat melanjutkan pengembangan aplikasi sesuai kebutuhan!

Membuat Migration, Model, dan Relasi untuk Tabel di Projek Booking Event Ticket

Pada aplikasi booking event ticket, tabel utama seperti products, categories, customers, dan orders membutuhkan struktur database yang terintegrasi dengan baik. Berikut adalah langkah-langkah untuk membuat file migration, model, properti fillable, dan hubungan antar tabel menggunakan Laravel Eloquent.

Membuat Migration untuk Tabel

Gunakan Artisan command untuk membuat migration. Setiap tabel dibuat dengan perintah:

php artisan make:migration create_products_table
php artisan make:migration create_categories_table
php artisan make:migration create_customers_table
php artisan make:migration create_orders_table

Setelah perintah ini dijalankan, file migration akan dibuat di direktori database/migrations. Edit file-file tersebut untuk mendefinisikan struktur tabel.

Migration untuk Tabel products

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

class CreateProductsTable extends Migration
{
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->text('description')->nullable();
            $table->decimal('price', 10, 2);
            $table->unsignedBigInteger('category_id');
            $table->timestamps();

            $table->foreign('category_id')->references('id')->on('categories')->onDelete('cascade');
        });
    }

    public function down()
    {
        Schema::dropIfExists('products');
    }
}

Migration untuk Tabel categories

class CreateCategoriesTable extends Migration
{
    public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('categories');
    }
}

Migration untuk Tabel customers

class CreateCustomersTable extends Migration
{
    public function up()
    {
        Schema::create('customers', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->string('phone');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('customers');
    }
}

Migration untuk Tabel orders

class CreateOrdersTable extends Migration
{
    public function up()
    {
        Schema::create('orders', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('customer_id');
            $table->decimal('total_price', 10, 2);
            $table->timestamps();

            $table->foreign('customer_id')->references('id')->on('customers')->onDelete('cascade');
        });
    }

    public function down()
    {
        Schema::dropIfExists('orders');
    }
}

Jalankan semua migration dengan perintah:

php artisan migrate

Membuat Model untuk Setiap Tabel

Gunakan Artisan command untuk membuat model:

php artisan make:model Product
php artisan make:model Category
php artisan make:model Customer
php artisan make:model Order

Edit masing-masing model untuk menambahkan properti fillable dan mendefinisikan relasi antar tabel.

Model Product

namespace App\\Models;

use Illuminate\\Database\\Eloquent\\Factories\\HasFactory;
use Illuminate\\Database\\Eloquent\\Model;

class Product extends Model
{
    use HasFactory;

    protected $fillable = ['name', 'description', 'price', 'category_id'];

    public function category()
    {
        return $this->belongsTo(Category::class);
    }
}

Model Category

namespace App\\Models;

use Illuminate\\Database\\Eloquent\\Factories\\HasFactory;
use Illuminate\\Database\\Eloquent\\Model;

class Category extends Model
{
    use HasFactory;

    protected $fillable = ['name'];

    public function products()
    {
        return $this->hasMany(Product::class);
    }
}

Model Customer

namespace App\\Models;

use Illuminate\\Database\\Eloquent\\Factories\\HasFactory;
use Illuminate\\Database\\Eloquent\\Model;

class Customer extends Model
{
    use HasFactory;

    protected $fillable = ['name', 'email', 'phone'];

    public function orders()
    {
        return $this->hasMany(Order::class);
    }
}

Model Order

namespace App\\Models;

use Illuminate\\Database\\Eloquent\\Factories\\HasFactory;
use Illuminate\\Database\\Eloquent\\Model;

class Order extends Model
{
    use HasFactory;

    protected $fillable = ['customer_id', 'total_price'];

    public function customer()
    {
        return $this->belongsTo(Customer::class);
    }

    public function products()
    {
        return $this->belongsToMany(Product::class, 'order_product')->withPivot('quantity');
    }
}

Menambahkan Pivot Table untuk Order dan Product

Gunakan perintah berikut untuk membuat pivot table order_product:

php artisan make:migration create_order_product_table

Edit migration tersebut:

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

class CreateOrderProductTable extends Migration
{
    public function up()
    {
        Schema::create('order_product', function (Blueprint $table) {
            $table->id();
            $table->unsignedBigInteger('order_id');
            $table->unsignedBigInteger('product_id');
            $table->integer('quantity');
            $table->timestamps();

            $table->foreign('order_id')->references('id')->on('orders')->onDelete('cascade');
            $table->foreign('product_id')->references('id')->on('products')->onDelete('cascade');
        });
    }

    public function down()
    {
        Schema::dropIfExists('order_product');
    }
}

Jalankan kembali perintah migrate untuk membuat tabel ini:

php artisan migrate

Dengan langkah-langkah ini, struktur tabel, model, properti fillable, dan hubungan antar tabel telah selesai dibuat. Kini projek Laravel untuk aplikasi booking event ticket siap dikembangkan lebih lanjut.

Cara Menginstall Package Filament dan Membuat Akun Admin di Laravel

Filament adalah library admin panel yang memudahkan developer membangun antarmuka admin yang modern dan fungsional. Berikut adalah panduan lengkap untuk menginstal Filament, membuat akun admin, dan mengonfigurasinya agar pengguna dapat bertindak sebagai admin.

Menginstal Package Filament

Langkah pertama adalah menginstal Filament pada projek Laravel. Pastikan Laravel sudah terinstal dan berfungsi dengan baik. Jalankan perintah berikut di terminal:

composer require filament/filament

Perintah ini akan mengunduh dan menginstal semua dependensi yang diperlukan untuk menggunakan Filament.

Menjalankan Instalasi Filament

Setelah package berhasil diinstal, jalankan perintah berikut untuk menyelesaikan instalasi Filament:

php artisan filament:install

Perintah ini akan menyiapkan semua file dan konfigurasi dasar yang dibutuhkan oleh Filament.

Membuat Akun Admin

Untuk membuat akun admin yang dapat mengakses panel admin Filament, gunakan command berikut:

php artisan make:filament-user

Setelah perintah ini dijalankan, kamu akan diminta untuk mengisi informasi pengguna admin, seperti berikut:

  1. Nama pengguna: Masukkan nama pengguna admin.
  2. Email pengguna: Masukkan email pengguna admin.
  3. Password: Masukkan password untuk admin.

Setelah selesai, user ini secara otomatis akan ditambahkan ke database dan siap digunakan untuk login ke panel admin.

Mengonfigurasi User sebagai Admin

Filament secara default menggunakan model App\\Models\\User untuk autentikasi. Model ini harus memiliki peran atau akses yang sesuai agar pengguna dapat bertindak sebagai admin.

Menambahkan Middleware Autentikasi

Pastikan middleware autentikasi sudah diatur di file filament.php yang terletak di direktori config. Buka file tersebut, dan pastikan bagian auth diatur seperti ini:

'auth' => [
    'guard' => 'web', // Gunakan guard default
    'pages' => [
        'login' => \\Filament\\Http\\Livewire\\Auth\\Login::class,
    ],
],

Menjalankan Panel Admin

Setelah semua langkah di atas selesai, jalankan server Laravel:

php artisan serve

Akses panel admin Filament dengan membuka URL berikut di browser:

<http://localhost/admin>

Masukkan email dan password yang sudah dibuat dengan php artisan make:filament-user. Setelah login, kamu akan melihat dashboard admin Filament.

Membuat Resource CRUD untuk Tabel di Filament

Filament menyediakan cara cepat untuk membuat fitur CRUD menggunakan perintah Artisan. Kita akan membuat resource untuk tabel products, categories, customers, dan orders. Berikut adalah langkah-langkah lengkap beserta contoh kodingnya.

Membuat Resource dengan Artisan Command

Gunakan perintah berikut untuk membuat resource CRUD untuk masing-masing tabel:

php artisan make:filament-resource Product
php artisan make:filament-resource Category
php artisan make:filament-resource Customer
php artisan make:filament-resource Order

Perintah ini akan membuat file resource di direktori App\\Filament\\Resources. File ini berisi konfigurasi untuk halaman CRUD, termasuk fields, forms, dan tables.

Resource untuk Product

Mengatur ProductResource

Buka file ProductResource.php di App\\Filament\\Resources dan atur fields, forms, dan tables.

namespace App\\Filament\\Resources;

use App\\Filament\\Resources\\ProductResource\\Pages;
use App\\Models\\Product;
use Filament\\Forms;
use Filament\\Tables;
use Filament\\Resources\\Resource;
use Filament\\Resources\\Forms\\Components\\TextInput;
use Filament\\Resources\\Forms\\Components\\Textarea;
use Filament\\Resources\\Forms\\Components\\Select;
use Filament\\Resources\\Tables\\Columns\\TextColumn;

class ProductResource extends Resource
{
    protected static ?string $model = Product::class;

    protected static ?string $navigationIcon = 'heroicon-o-collection';

    public static function form(Forms\\Form $form): Forms\\Form
    {
        return $form->schema([
            TextInput::make('name')->required(),
            Textarea::make('description'),
            TextInput::make('price')->numeric()->required(),
            Select::make('category_id')
                ->relationship('category', 'name')
                ->required(),
        ]);
    }

    public static function table(Tables\\Table $table): Tables\\Table
    {
        return $table->columns([
            TextColumn::make('id')->sortable(),
            TextColumn::make('name')->sortable()->searchable(),
            TextColumn::make('price')->sortable(),
            TextColumn::make('category.name')->label('Category'),
        ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\\ListProducts::route('/'),
            'create' => Pages\\CreateProduct::route('/create'),
            'edit' => Pages\\EditProduct::route('/{record}/edit'),
        ];
    }
}

Fields dan Tables:

  • Fields:
    • name: Input teks wajib diisi.
    • description: Textarea opsional.
    • price: Input numerik wajib diisi.
    • category_id: Dropdown untuk memilih kategori.
  • Table Columns:
    • id: Ditampilkan dan dapat diurutkan.
    • name: Dapat dicari dan diurutkan.
    • price: Dapat diurutkan.
    • category.name: Menampilkan nama kategori terkait.

Resource untuk Category

Mengatur CategoryResource

namespace App\\Filament\\Resources;

use App\\Filament\\Resources\\CategoryResource\\Pages;
use App\\Models\\Category;
use Filament\\Forms;
use Filament\\Tables;
use Filament\\Resources\\Resource;
use Filament\\Resources\\Forms\\Components\\TextInput;
use Filament\\Resources\\Tables\\Columns\\TextColumn;

class CategoryResource extends Resource
{
    protected static ?string $model = Category::class;

    protected static ?string $navigationIcon = 'heroicon-o-folder';

    public static function form(Forms\\Form $form): Forms\\Form
    {
        return $form->schema([
            TextInput::make('name')->required(),
        ]);
    }

    public static function table(Tables\\Table $table): Tables\\Table
    {
        return $table->columns([
            TextColumn::make('id')->sortable(),
            TextColumn::make('name')->sortable()->searchable(),
        ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\\ListCategories::route('/'),
            'create' => Pages\\CreateCategory::route('/create'),
            'edit' => Pages\\EditCategory::route('/{record}/edit'),
        ];
    }
}

Fields dan Tables:

  • Fields:
    • name: Input teks wajib diisi.
  • Table Columns:
    • id: Ditampilkan dan dapat diurutkan.
    • name: Dapat dicari dan diurutkan.

Resource untuk Customer

Mengatur CustomerResource

namespace App\\Filament\\Resources;

use App\\Filament\\Resources\\CustomerResource\\Pages;
use App\\Models\\Customer;
use Filament\\Forms;
use Filament\\Tables;
use Filament\\Resources\\Resource;
use Filament\\Resources\\Forms\\Components\\TextInput;
use Filament\\Resources\\Tables\\Columns\\TextColumn;

class CustomerResource extends Resource
{
    protected static ?string $model = Customer::class;

    protected static ?string $navigationIcon = 'heroicon-o-user';

    public static function form(Forms\\Form $form): Forms\\Form
    {
        return $form->schema([
            TextInput::make('name')->required(),
            TextInput::make('email')->email()->required(),
            TextInput::make('phone')->required(),
        ]);
    }

    public static function table(Tables\\Table $table): Tables\\Table
    {
        return $table->columns([
            TextColumn::make('id')->sortable(),
            TextColumn::make('name')->sortable()->searchable(),
            TextColumn::make('email')->searchable(),
            TextColumn::make('phone'),
        ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\\ListCustomers::route('/'),
            'create' => Pages\\CreateCustomer::route('/create'),
            'edit' => Pages\\EditCustomer::route('/{record}/edit'),
        ];
    }
}

Fields dan Tables:

  • Fields:
    • name: Input teks wajib diisi.
    • email: Input email wajib diisi.
    • phone: Input teks wajib diisi.
  • Table Columns:
    • id: Ditampilkan dan dapat diurutkan.
    • name: Dapat dicari dan diurutkan.
    • email: Dapat dicari.
    • phone: Ditampilkan.

Resource untuk Order

Mengatur OrderResource

namespace App\\Filament\\Resources;

use App\\Filament\\Resources\\OrderResource\\Pages;
use App\\Models\\Order;
use Filament\\Forms;
use Filament\\Tables;
use Filament\\Resources\\Resource;
use Filament\\Resources\\Forms\\Components\\TextInput;
use Filament\\Resources\\Forms\\Components\\Select;
use Filament\\Resources\\Tables\\Columns\\TextColumn;

class OrderResource extends Resource
{
    protected static ?string $model = Order::class;

    protected static ?string $navigationIcon = 'heroicon-o-shopping-cart';

    public static function form(Forms\\Form $form): Forms\\Form
    {
        return $form->schema([
            Select::make('customer_id')
                ->relationship('customer', 'name')
                ->required(),
            TextInput::make('total_price')->numeric()->required(),
        ]);
    }

    public static function table(Tables\\Table $table): Tables\\Table
    {
        return $table->columns([
            TextColumn::make('id')->sortable(),
            TextColumn::make('customer.name')->label('Customer')->searchable(),
            TextColumn::make('total_price')->sortable(),
            TextColumn::make('created_at')->label('Order Date')->dateTime(),
        ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\\ListOrders::route('/'),
            'create' => Pages\\CreateOrder::route('/create'),
            'edit' => Pages\\EditOrder::route('/{record}/edit'),
        ];
    }
}

Fields dan Tables:

  • Fields:
    • customer_id: Dropdown untuk memilih pelanggan.
    • total_price: Input numerik wajib diisi.
  • Table Columns:
    • id: Ditampilkan dan dapat diurutkan.
    • customer.name: Menampilkan nama pelanggan.
    • total_price: Dapat diurutkan.
    • created_at: Ditampilkan sebagai tanggal.

Dengan konfigurasi di atas, setiap resource kini memiliki fitur CRUD yang lengkap dan dapat diakses melalui admin panel Filament.

Menambahkan Fitur Integrasi dengan Payment Gateway (Midtrans)

Mengintegrasikan payment gateway seperti Midtrans ke aplikasi Laravel memungkinkan kita memproses pembayaran langsung dari halaman checkout dan memonitor transaksi melalui halaman admin. Berikut adalah langkah-langkah lengkap untuk mengintegrasikan Midtrans ke dalam aplikasi Laravel, termasuk pengelolaan pembayaran di halaman admin.

Instalasi dan Konfigurasi Midtrans

Untuk mengintegrasikan Midtrans, pastikan Anda memiliki akun di Midtrans dan mendapatkan API key. Berikut langkah-langkahnya:

1. Instalasi Library Midtrans

Tambahkan library Midtrans SDK ke dalam projek Laravel dengan menggunakan Composer:

composer require midtrans/midtrans-php

2. Konfigurasi API Key

Tambahkan API key Midtrans ke dalam file .env:

MIDTRANS_SERVER_KEY=your-server-key
MIDTRANS_CLIENT_KEY=your-client-key
MIDTRANS_IS_PRODUCTION=false
MIDTRANS_MERCHANT_ID=your-merchant-id

Buat file konfigurasi baru untuk Midtrans. Jalankan perintah:

php artisan make:config midtrans

Edit file config/midtrans.php:

return [
    'serverKey' => env('MIDTRANS_SERVER_KEY'),
    'clientKey' => env('MIDTRANS_CLIENT_KEY'),
    'isProduction' => env('MIDTRANS_IS_PRODUCTION', false),
    'merchantId' => env('MIDTRANS_MERCHANT_ID'),
];

Membuat Proses Checkout dengan Midtrans

Membuat Form Checkout

Di halaman checkout, tampilkan form untuk memasukkan detail pembelian. Contoh form:

<form action="/checkout/process" method="POST">
    @csrf
    <label for="name">Nama:</label>
    <input type="text" name="name" id="name" required>

    <label for="email">Email:</label>
    <input type="email" name="email" id="email" required>

    <label for="amount">Jumlah Pembayaran:</label>
    <input type="number" name="amount" id="amount" required>

    <button type="submit">Bayar Sekarang</button>
</form>

Membuat Controller untuk Proses Pembayaran

Buat controller untuk memproses pembayaran dengan Midtrans:

php artisan make:controller CheckoutController

Edit CheckoutController:

namespace App\\Http\\Controllers;

use Illuminate\\Http\\Request;
use Midtrans\\Config;
use Midtrans\\Snap;

class CheckoutController extends Controller
{
    public function process(Request $request)
    {
        // Konfigurasi Midtrans
        Config::$serverKey = config('midtrans.serverKey');
        Config::$isProduction = config('midtrans.isProduction');
        Config::$isSanitized = true;
        Config::$is3ds = true;

        // Data transaksi
        $transactionDetails = [
            'order_id' => uniqid(),
            'gross_amount' => $request->amount,
        ];

        $customerDetails = [
            'first_name' => $request->name,
            'email' => $request->email,
        ];

        $transaction = [
            'transaction_details' => $transactionDetails,
            'customer_details' => $customerDetails,
        ];

        // Mendapatkan token transaksi
        $snapToken = Snap::getSnapToken($transaction);

        // Mengirimkan token ke view untuk ditampilkan
        return view('checkout.payment', ['snapToken' => $snapToken]);
    }
}

Menampilkan Snap Midtrans di View

Buat file resources/views/checkout/payment.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="<https://app.sandbox.midtrans.com/snap/snap.js>" data-client-key="{{ config('midtrans.clientKey') }}"></script>
</head>
<body>
    <button id="pay-button">Bayar Sekarang</button>

    <script type="text/javascript">
        var payButton = document.getElementById('pay-button');
        payButton.addEventListener('click', function () {
            snap.pay('{{ $snapToken }}', {
                onSuccess: function (result) {
                    alert('Payment Success');
                    console.log(result);
                },
                onPending: function (result) {
                    alert('Payment Pending');
                    console.log(result);
                },
                onError: function (result) {
                    alert('Payment Failed');
                    console.log(result);
                },
            });
        });
    </script>
</body>
</html>

Mengelola Pembayaran di Halaman Admin

Tambahkan tabel transactions untuk mencatat pembayaran. Buat migrasi baru:

php artisan make:migration create_transactions_table

Edit file migrasi:

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

class CreateTransactionsTable extends Migration
{
    public function up()
    {
        Schema::create('transactions', function (Blueprint $table) {
            $table->id();
            $table->string('order_id')->unique();
            $table->decimal('gross_amount', 10, 2);
            $table->string('payment_status');
            $table->string('customer_name');
            $table->string('customer_email');
            $table->timestamps();
        });
    }

    public function down()
    {
        Schema::dropIfExists('transactions');
    }
}

Jalankan migrasi:

php artisan migrate

Tambahkan model dan resource CRUD untuk transaksi menggunakan Filament:

php artisan make:model Transaction -m
php artisan make:filament-resource Transaction

Edit TransactionResource untuk menampilkan data pembayaran di admin panel:

namespace App\\Filament\\Resources;

use App\\Filament\\Resources\\TransactionResource\\Pages;
use App\\Models\\Transaction;
use Filament\\Resources\\Resource;
use Filament\\Resources\\Forms;
use Filament\\Resources\\Tables;
use Filament\\Resources\\Forms\\Components\\TextInput;
use Filament\\Resources\\Tables\\Columns\\TextColumn;

class TransactionResource extends Resource
{
    protected static ?string $model = Transaction::class;

    public static function form(Forms\\Form $form): Forms\\Form
    {
        return $form->schema([
            TextInput::make('order_id')->disabled(),
            TextInput::make('customer_name')->disabled(),
            TextInput::make('customer_email')->disabled(),
            TextInput::make('gross_amount')->disabled(),
            TextInput::make('payment_status')->disabled(),
        ]);
    }

    public static function table(Tables\\Table $table): Tables\\Table
    {
        return $table->columns([
            TextColumn::make('order_id'),
            TextColumn::make('customer_name'),
            TextColumn::make('gross_amount'),
            TextColumn::make('payment_status'),
            TextColumn::make('created_at')->label('Transaction Date')->dateTime(),
        ]);
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\\ListTransactions::route('/'),
            'view' => Pages\\ViewTransaction::route('/{record}'),
        ];
    }
}

Dengan konfigurasi ini, pembayaran dapat diproses melalui halaman checkout menggunakan Midtrans, dan semua data transaksi dapat dikelola melalui halaman admin.

Menambahkan Fitur Notifikasi Email Otomatis di Laravel

Laravel menyediakan fitur untuk mengirim notifikasi email menggunakan class Mailable. Fitur ini sangat berguna untuk menginformasikan pengguna ketika ada pesanan baru, perubahan status pesanan, atau pengingat untuk menyelesaikan pembayaran. Berikut adalah langkah-langkah untuk menambahkan notifikasi email otomatis dengan contoh koding lengkap.

Konfigurasi Email di Laravel

Pastikan konfigurasi email sudah diatur di file .env. Misalnya, menggunakan SMTP:

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=your_username
MAIL_PASSWORD=your_password
MAIL_ENCRYPTION=tls
[email protected]
MAIL_FROM_NAME="Your Application"

Membuat Class Mailable

Gunakan perintah Artisan untuk membuat class Mailable yang akan digunakan sebagai template email:

php artisan make:mail OrderNotification

File OrderNotification.php akan dibuat di direktori App\\Mail. Edit file ini untuk mengatur konten email:

namespace App\\Mail;

use Illuminate\\Bus\\Queueable;
use Illuminate\\Mail\\Mailable;
use Illuminate\\Queue\\SerializesModels;

class OrderNotification extends Mailable
{
    use Queueable, SerializesModels;

    public $order;
    public $message;

    public function __construct($order, $message)
    {
        $this->order = $order;
        $this->message = $message;
    }

    public function build()
    {
        return $this->subject('Order Notification')
                    ->view('emails.order-notification')
                    ->with([
                        'order' => $this->order,
                        'message' => $this->message,
                    ]);
    }
}

Membuat Template Email

Buat file template email di resources/views/emails/order-notification.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Order Notification</title>
</head>
<body>
    <h1>Hi {{ $order->customer_name }},</h1>
    <p>{{ $message }}</p>

    <h3>Order Details:</h3>
    <ul>
        <li>Order ID: {{ $order->id }}</li>
        <li>Total: {{ $order->total_price }}</li>
        <li>Status: {{ $order->status }}</li>
    </ul>

    <p>Thank you for shopping with us!</p>
</body>
</html>

Mengirim Email Berdasarkan Event

Buat event dan listener untuk mengirim email ketika ada pesanan baru atau perubahan status pesanan.

Membuat Event dan Listener

Gunakan perintah untuk membuat event OrderStatusUpdated:

php artisan make:event OrderStatusUpdated

Edit file event OrderStatusUpdated.php:

namespace App\\Events;

use App\\Models\\Order;
use Illuminate\\Foundation\\Events\\Dispatchable;
use Illuminate\\Queue\\SerializesModels;

class OrderStatusUpdated
{
    use Dispatchable, SerializesModels;

    public $order;
    public $message;

    public function __construct(Order $order, $message)
    {
        $this->order = $order;
        $this->message = $message;
    }
}

Buat listener untuk event ini:

php artisan make:listener SendOrderNotification

Edit file listener SendOrderNotification.php:

namespace App\\Listeners;

use App\\Events\\OrderStatusUpdated;
use App\\Mail\\OrderNotification;
use Illuminate\\Support\\Facades\\Mail;

class SendOrderNotification
{
    public function handle(OrderStatusUpdated $event)
    {
        Mail::to($event->order->customer_email)->send(
            new OrderNotification($event->order, $event->message)
        );
    }
}

Mendaftarkan Event dan Listener

Daftarkan event dan listener di EventServiceProvider.php:

protected $listen = [
    \\App\\Events\\OrderStatusUpdated::class => [
        \\App\\Listeners\\SendOrderNotification::class,
    ],
];

Menggunakan Event untuk Mengirim Email

Trigger event ketika status pesanan berubah. Misalnya, di controller yang mengelola pesanan:

namespace App\\Http\\Controllers;

use App\\Events\\OrderStatusUpdated;
use App\\Models\\Order;
use Illuminate\\Http\\Request;

class OrderController extends Controller
{
    public function updateStatus(Request $request, $id)
    {
        $order = Order::findOrFail($id);
        $order->status = $request->status;
        $order->save();

        $message = "Your order status has been updated to: {$order->status}.";

        // Trigger event
        event(new OrderStatusUpdated($order, $message));

        return response()->json(['message' => 'Order status updated and notification sent.']);
    }
}

Menambahkan Pengingat untuk Menyelesaikan Pembayaran

Untuk mengirim pengingat otomatis, gunakan job dengan queue:

Buat job menggunakan perintah:

php artisan make:job SendPaymentReminder

Edit file job SendPaymentReminder.php:

namespace App\\Jobs;

use App\\Mail\\OrderNotification;
use App\\Models\\Order;
use Illuminate\\Bus\\Queueable;
use Illuminate\\Support\\Facades\\Mail;

class SendPaymentReminder
{
    use Queueable;

    protected $order;

    public function __construct(Order $order)
    {
        $this->order = $order;
    }

    public function handle()
    {
        $message = "Please complete your payment for order #{$this->order->id}.";
        Mail::to($this->order->customer_email)->send(
            new OrderNotification($this->order, $message)
        );
    }
}

Tambahkan logika untuk dispatch job, misalnya di scheduler (app/Console/Kernel.php):

protected function schedule(Schedule $schedule)
{
    $schedule->call(function () {
        $orders = Order::where('status', 'pending')->get();
        foreach ($orders as $order) {
            dispatch(new SendPaymentReminder($order));
        }
    })->daily();
}

Dengan demikian, kita telah berhasil membangun sebuah dashboard canggih yang terintegrasi dengan Midtrans untuk pembayaran, serta dukungan notifikasi otomatis melalui email provider. Fitur-fitur ini menjadikan aplikasi kita lebih profesional, fungsional, dan siap untuk digunakan di dunia nyata.

Namun, kemampuan seperti ini membutuhkan waktu untuk dikuasai, terutama jika ingin membangun sistem yang scalable dan efisien. Sebagai programmer, terus belajar adalah kunci untuk tetap relevan dan berkembang. Bergabunglah dengan program mentoring bersama BuildWithAngga, di mana Anda bisa belajar langsung dari mentor expert yang siap membimbing Anda.

Keuntungan belajar di BuildWithAngga:

  • Akses materi seumur hidup, memungkinkan Anda untuk belajar kapan saja.
  • Portfolio berkualitas tinggi, yang dirancang untuk membantu Anda mendapatkan pekerjaan impian.
  • Proyek nyata, yang akan meningkatkan pemahaman dan keterampilan Anda sebagai developer.

Mulai perjalanan Anda untuk menjadi programmer andal dengan bergabung bersama BuildWithAngga, dan wujudkan karier impian Anda dengan percaya diri! 🚀