Digitalmapia adalah situs dimana semua orang bisa menulis artikelnya sendiri. Klik "Login/Register untuk masuk, lalu klik "Tulis Artikel" untuk mulai menulis.

Membuat Shopping Cart Menggunakan Laravel

Shopping cart sangat diperlukan ketika kita membuat aplikasi terutama yang berhubungan dengan toko online. Dengan menggunakan shopping cart, barang yang akan dibeli oleh pengguna bisa disimpan terlebih dahulu dan pengguna dapat melanjutkan berbelanja. Data barang disimpan di dalam cache, sehingga ketika pengguna berpindah halaman pada aplikasi, data tersebut tidak hilang. Data barang tersebut kemudian akan disimpan di database ketika pengguna selesai berbelanja dan menekan tombol checkout.

Instal package shopping cart

Untuk membuat shopping cart pada Laravel kita akan menambahkan sebuah package baru. Untuk itu, buka file composer.json dan tambahkan "gloudemans/shoppingcart": "dev-master" pada bagian require sehingga menjadi seperti berikut:

"require": {
	"laravel/framework": "4.1.25",
	"gloudemans/shoppingcart": "dev-master"
},

setelah itu, buka command-line lalu masuk ke dalam folder laravel anda ( cd c://xampp/htdocs/<nama folder> bagi pengguna windows atau cd /var/www/<nama folder> jika anda menggunakan linux). Setelah masuk ke dalam direktori, lalu jalankan perintah composer update, tunggu sampai proses update selesai.

Setelah itu, buka file app/config/app.php kemudian tambahkan kode berikut pada bagian service providers:

'Gloudemans\Shoppingcart\ShoppingcartServiceProvider'

Lalu pada bagian aliases tambahkan kode berikut:

'Cart' => 'Gloudemans\Shoppingcart\Facades\Cart',

NOTE: Saat menjalankan composer update anda perlu terhubung ke internet.

Membuat tabel Produk

Sebelum lebih jauh membahas penggunaan shopping cart, mari kita buat terlebih dahulu database untuk menampung produk dengan menjalankan migrasi sebagai berikut:

Schema::create('products', function($table){
	$table->increments('id')->unsigned();
	$table->string('name');
	$table->string('description', 500);
	$table->string('price', 10);
	$table->timestamps();
});

Tabel produk yang saya buat diatas saya buat sesederhana mungkin agar tidak terlalu rumit. Tabel dibuat dengan migrasi-nya laravel. Bagi anda yang belum tahu cara migrasi tabel dengan laravel, bisa baca disini. Anda juga bisa membuat tabel secara manual dengan menggunakan PHPMyadmin jika anda mau. Setelah tabel dibuat, masukan beberapa data ke dalamnya.

Menampilkan List Produk

Selanjutnya, kita buat halaman untuk menampilkan list produk. Dimana pada masing-masing item, terdapat tombol ‘add to cart’ yang berfungsi memasukan produk ke keranjang belanja (shopping cart). Untuk membuat halaman tersebut, ada beberapa tahapan yang harus kita lakukan. Pertama pada direktori app/model buat sebuah model bernama Product:

<!-- app/model/product.php -->
<?php 
	class Product extends Eloquent
	{
		
	}
?>

Selanjutnya, pada file app/routes.php, ubah route utama menjadi seperti berikut:

Route::get('/', function()
{
	$products = Product::all();
	return View::make('productlist')->with('products', $products);
});

Lalu pada folder app/views buat sebuah view baru dengan nama productlist.blade.php sesuai yang kita telah definisikan pada route:

<!-- productlist.blade.php -->

<div class="container">
@foreach($products as $product)
	<div class="col-md-3">
		<div class="panel">
			<div class="panel-heading">
				{{ $product->name }}
			</div>
			<div class="panel-body">
				{{ $product->description }}
			</div>
			<div class="panel-footer">
				<a class="btn btn-info pull-right" href="{{ url('product/cart/'.$product->id) }}"><i class="fa fa-shopping-cart"></i> add to cart</a>
			</div>
		</div>
	</div>
@endforeach
</div>

NOTE: Saya menggunakan Twitter Bootstrap sebagai CSS Framework, itulah sebabnya saya menggunakan class ‘container’, ‘panel-heading’, ‘panel-body’ dan lain-lain.

Membuat shopping cart

Yap, akhirnya kita sampai juga pada bahasan utama kita. Jika anda perhatikan view yang telah anda buat, didalamnya terdapat syntax sebagai berikut:

<a class="btn btn-info pull-right" href="{{ url('product/cart/'.$product->id) }}"><i class="fa fa-shopping-cart"></i> add to cart</a>

Perhatikan bahwa ketika tombol ‘add to cart’ di-klik, maka pengguna akan diarahkan ke route product/cart. Untuk itu mari kita buat route tersebut, tambahkan kode dibawah ini pada app/routes.php:

Route::get('product/cart/{id}', function($id){
	

});

Kemudian, pada route tersebut kita akan memasukan product yang dimaksud ke dalam cache shopping cart, setelah itu kita tampilkan isi dari shopping cart tersebut dalam bentuk tabel. Ubah kode diatas menjadi sebagai berikut:

Route::get('product/cart/{id}', function($id){
		$product = Product::find($id);

		$id          = $product->id;
		$name        = $product->name;
		$qty         = 1;
		$price       = $product->price;

		$data = array('id'          => $id, 
					  'name'        => $name, 
					  'qty'         => $qty, 
					  'price'       => $price, 
					  'options'     => array('size' => 'large'));

		Cart::add($data);

		$cart_content = Cart::content(1);
		return View::make('productcart')->with('cart_content', $cart_content);
});

setelah itu, kita buat sebuah view baru productcart.blade.php.

<!-- app/views/productcart.blade.php -->

<div class="container">
	<h4><i class="fa fa-shopping-cart"></i> cart</h4>
	<hr>
	<!-- Panel -->
	{{ Message::success() }}
	<div class="panel">
		<div class="panel-heading">Cart</div>
		<table class="table table-striped m-b-none text-sm">
          <thead>
            <tr>
              <th width="8">No</th>
              <th width="300">Product Name</th>                    
              <th>Price</th>
              <th width="100">Quantity</th>
              <th width="200">Action</th>
            </tr>
          </thead>
          <tbody>

          <?php $i = 1; ?>
          @foreach($cart_content as $cart)
          	<tr>
          		<td>{{ $i }}</td>
          		<td>{{ $cart->name }}</td>
          		<td>{{ $cart->price }}</td>
          		<td>{{ $cart->qty }}</td>
          		<td>
          			<a href="{{ url('cart/delete/'.$cart->rowid) }}">delete</a>
          		</td>
          	</tr>
          <?php $i++; ?>
          @endforeach

          </tbody>
      </table>
      <div class="panel-footer">
      	<a href="{{ url('/dashboard') }}" class="btn btn-white">Continue Shopping</a>
      	<a href="{{ url('cart/checkout') }}" class="btn btn-info">Checkout</a>
      </div>
	</div>
    <!-- / Panel -->
</div>

Menghapus item dari dalam shopping cart

Jika anda perhatikan view yang telah anda buat diatas, akan terdapat link delete yang mengarah ke route cart/delete/{id}. Untuk itu, mari kita buat route tersebut. Tambahkan syntax berikut pada app/routes.php:

Route::get('cart/delete/{id}' , function(){
	Cart::remove($id);
	return View::make('productcart')->with('cart_content', $cart_content);
});

Perhatikan bahwa sebuah item dalam cart bisa dihapus berdasarkan rowid yang dimilikinya.

Melakukan checkout

Untuk melakukan checkout, kita akan membuat sebuah route sebagai berikut:

Route::get('cart/checkout' , function(){
			
		$formid       = str_random();
		$cart_content = Cart::content(1);

		foreach ($cart_content as $cart) {

			$transaction  = new Transaction();

			$product = Product::find($cart->id);

			$transaction->product_id  = $cart->id;
			$transaction->form_id     = $formid;
			$transaction->qty         = $cart->qty;
			$transaction->total_price = $cart->price * $cart->qty;
			$transaction->status      = 'unpaid';

			$transaction->save();

		}

		

		Cart::destroy();

		echo "Checkout berhasil";
});

Perhatikan kode diatas, pada saat melakukan checkout, kita akan memindahkan semua data yang ada pada cart ke dalam sebuah tabel bernama transactions. Dengan demikian, jika kita melakukan checkout sekarang, maka akan terjadi error karena tabel transactions masih belum kita buat. Untuk membuat tabel transactions, gunakan migrasi sebagai berikut:

  Schema::create('transactions', function($table){
    $table->increments('id')->unsigned();
    $table->string('product_id');
    $table->string('form_id');
    $table->string('qty');
    $table->string('total_price');
    $table->string('status');
    $table->timestamps();
  });

Kemudian pada app/models tambahkan sebuah model transaction.php sebagai berikut:

<?php 
	class Transaction extends Eloquent
	{
		
	}
?>

Sekarang, jika anda kembali mencoba melakukan checkout. Maka data-data di dalam cart akan berhasil dimasukan ke dalam tabel transaction.

semoga bermanfaat.

Laravel Wallpapper
  • http://about-electriccars.blogspot.com/ yoechua

    penjelasan nya mudah di pahami, nti saya coba, maksih gan … cz aq lgi butuh mengenai shoping cart.. :)