Buat Pesanan Dengan Produk – Panel Admin Cepat

Sangat mudah untuk membuat form sederhana di Laravel. Namun lebih sulit untuk membuatnya dinamis – kasus yang paling umum adalah elemen induk-anak, seperti membuat faktur dan menambahkan item secara dinamis dalam bentuk yang sama. Pada artikel ini, kita akan membuat contoh serupa – membuat pesanan dan menambahkan produk ke dalamnya.

---

Migrasi dan Model Basis Data

Pertama, struktur database di Laravel – tiga file migrasi:

Schema::create('products', function (Blueprint $table) {
    $table->increments('id');
    $table->string('name');
    $table->decimal('price', 15, 2)->nullable();
    $table->timestamps();
});

Schema::create('orders', function (Blueprint $table) {
    $table->increments('id');
    $table->string('customer_name');
    $table->string('customer_email')->nullable();
    $table->timestamps();
});

Schema::create('order_product', function (Blueprint $table) {
    $table->unsignedInteger('order_id');
    $table->foreign('order_id')->references('id')->on('orders');
    $table->unsignedInteger('product_id');
    $table->foreign('product_id')->references('id')->on('products');
    $table->integer('quantity');
});

Seperti yang Anda lihat, ada hubungan banyak ke banyak antara pesanan dan produk, dan tabel pivot juga berisi bidang bilangan bulat kuantitas.

Berikut tampilannya dalam model Laravel.

aplikasi/Produk.php:

class Product extends Model
{
    protected $fillable = [
        'name',
        'price',
    ];
}

app/Order.php:

class Order extends Model
{
    protected $fillable = [
        'customer_name',
        'customer_email',
    ];

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

Seperti yang Anda lihat, kami menambahkan denganPivot([‘quantity’]) untuk dapat memanipulasi bidang itu dengan lebih mudah dengan Eloquent, akan ditunjukkannya nanti.

Sekarang, jika kita menjalankan migrasi ini dan kemudian merekayasa balik database dengan MySQL Workbench, kita memiliki struktur ini:

---

Buat Formulir Pemesanan

Sekarang saatnya membuat form untuk membuat pesanan, berikut screenshotnya lagi:

Pertama, metode Controller dengan meneruskan produk yang tersedia dari database.

app/Http/Controllers/Admin/OrdersController.php:

public function create()
{
    $products = Product::all();
    return view('admin.orders.create', compact('products'));
}

Sederhana, bukan? Sekarang, mari kita pergi ke file Blade.

Melihat: Formulir ini sebenarnya sudah dibuat sebelumnya oleh QuickAdminPanel, namun Anda dapat membuatnya sendiri secara manual.

Jadi, kita punya ini sumber daya/views/admin/orders/create.blade.php. Saya sengaja melewatkan kolom nama pelanggan/email, dan hanya fokus pada produk:

<form action="{{ route("admin.orders.store") }}" method="POST">
    @csrf

    {{-- ... customer name and email fields --}}

    <div class="card">
        <div class="card-header">
            Products
        </div>

        <div class="card-body">
            <table class="table" id="products_table">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th>Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="product0">
                        <td>
                            <select name="products[]" class="form-control">
                                <option value="">-- choose product --</option>
                                @foreach ($products as $product)
                                    <option value="{{ $product->id }}">
                                        {{ $product->name }} (${{ number_format($product->price, 2) }})
                                    </option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input type="number" name="quantities[]" class="form-control" value="1" />
                        </td>
                    </tr>
                    <tr id="product1"></tr>
                </tbody>
            </table>

            <div class="row">
                <div class="col-md-12">
                    <button id="add_row" class="btn btn-default pull-left">+ Add Row</button>
                    <button id='delete_row' class="pull-right btn btn-danger">- Delete Row</button>
                </div>
            </div>
        </div>
    </div>
    <div>
        <input class="btn btn-danger" type="submit" value="{{ trans('global.save') }}">
    </div>
</form>

Jadi, kami membuat tabel produk di sini, dan untuk membuatnya dinamis kami menggunakan pendekatan yang saya temukan di Cuplikan Bootstrap ini:

• Kami mengisi terlebih dahulu baris pertama tabel dengan semua bidang
• Kami juga membuat baris kosong baru yang tidak terlihat oleh pengguna
• Tombol “Tambahkan baris” kemudian akan menduplikasi baris terakhir tabel dan membuat satu lagi baris kosong yang tidak terlihat
• Tombol “Hapus baris” kemudian akan menghapus baris terakhir tabel
• Variabel input setiap baris akan berupa array, jadi untuk hasil POST kita akan memiliki array produk[] Dan jumlah[]

Inilah bagian jQuery – letakkan di mana pun Anda memiliki bagian JavaScript:

  $(document).ready(function(){
    let row_number = 1;
    $("#add_row").click(function(e){
      e.preventDefault();
      let new_row_number = row_number - 1;
      $('#product' + row_number).html($('#product' + new_row_number).html()).find('td:first-child');
      $('#products_table').append('<tr id="product' + (row_number + 1) + '"></tr>');
      row_number++;
    });

    $("#delete_row").click(function(e){
      e.preventDefault();
      if(row_number > 1){
        $("#product" + (row_number - 1)).html('');
        row_number--;
      }
    });
  });

---

Menyimpan Data Pesanan dan Produk

Mari kita kembali ke kita app/Http/Controllers/Admin/OrdersController.phpdia toko() caranya akan terlihat seperti ini:

public function store(StoreOrderRequest $request)
{
    $order = Order::create($request->all());

    $products = $request->input('products', []);
    $quantities = $request->input('quantities', []);
    for ($product=0; $product < count($products); $product++) {
        if ($products[$product] != '') {
            $order->products()->attach($products[$product], ['quantity' => $quantities[$product]]);
        }
    }

    return redirect()->route('admin.orders.index');
}

Apa yang kita punya di sini?

• Pertama kita simpan data utama pesanannya ke dalam $pesanan;
• Kemudian, kita mengambil array produk/kuantitas, menempatkan array kosong sebagai nilai jika tidak ada;
• Kami mengulangi produk dan jika ID produk tidak kosong kami menggunakan menempel() metode hubungan banyak-ke-banyak, menambah nilai kuantitas sebagai parameter tambahan (baca selengkapnya tentang banyak-ke-banyak di artikel populer saya).

Dan itu saja dengan penyimpanan data, pesanan produk disimpan di database!

---

Lihat Pesanan dengan Produk dalam Daftar

Hal terakhir dalam artikel ini – kami memiliki daftar pesanan, dan salah satu kolomnya harus berupa produk dari pesanan tersebut.

Bagaimana cara membuat daftar produk tersebut?

app/Http/Controllers/Admin/OrdersController.php:

public function index()
{
    $orders = Order::with('products')->get();
    return view('admin.orders.index', compact('orders'));
}

Kemudian – sumber daya/tampilan/admin/pesanan/index.blade.php – setiap baris tabel akan terlihat seperti ini:

@foreach($orders as $order)
    <tr data-entry-id="{{ $order->id }}">
        <td>
            {{ $order->id ?? '' }}
        </td>
        <td>
            {{ $order->customer_name ?? '' }}
        </td>
        <td>
            {{ $order->customer_email ?? '' }}
        </td>
        <td>
            <ul>
            @foreach($order->products as $item)
                <li>{{ $item->name }} ({{ $item->pivot->quantity }} x ${{ $item->price }})</li>
            @endforeach
            </ul>
        </td>
        <td>
            {{-- ... buttons ... --}}
        </td>

    </tr>
@endforeach

Seperti yang Anda lihat, kami menggunakan $item->pivot->kuantitas untuk mendapatkan kolom tambahan dari tabel pivot.

---

Dan itu saja dengan proyek mini ini!
Saya telah meletakkan versi yang sudah selesai di Github di sini:

Di sana Anda akan menemukan beberapa fungsi lainnya, seperti mengedit pesanan, dan sistem login/izin lengkap berbasis QuickAdminPanel.