Laravel mengirim data via Ajax

Sekarang ini Ajax di dunia web programming mungkin sangat sederhana. Dengan adanya jquery, sintax yang panjang untuk request dan response data via Ajax jadi sangat pendek dan enak bener. Jadi keinget dulu pertama kali diajarin ajax sama Pa Andri Heryandi. Itu dosen ngomong apa gw ga ngerti πŸ˜€

Kali ini cuma ingin share bagaimana cara untuk mengirim data via ajax di Laravel. Emang beda? iya beda ternyata. Dikit sih, ga banyak πŸ™‚

Awalnya tetep dan seperti biasa, namanya laravel, kita mesti nambahin url ajax nya dulu di App/Http/routes.php

Misalnya gini:

1
Route::post('/cart_delete', ['as'=>'frontend.cart.cart_delete', 'uses' => 'CartController@cart_delete']);

Pada kode diatas, saya pakai method POST lalu mengakses CartController, methodnya cart_delete.

Lalu di bagian view atau di laravel viewnya disebut blade saya contohkan untuk proses delete cart seperti kode dibawah ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
{!! Form::open(array('route' => 'frontend.cart.cart_update','id'=>'form_data', 'class'=>'form-horizontal form-label-left', 'method' => 'POST' )) !!}
    {!! csrf_field() !!}

  <table class='table table-bordered'>
    <thead>
      <tr>
        <td>No</td>
        <td>Product Name</td>
        <td>Product Attribute</td>
        <td>Product Price</td>
        <td>Product Qty</td>
        <td>Subtotal</td>
        <td>x</td>
      </tr>
    </thead>
    <tbody>
      <?php $i=1; ?>
      @foreach(Cart::content() as $index=>$row)
        <tr id="{{$row->rowId}}">
          <td>{{$i}}</td>
          <td>{{ $row->name }}</td>
          <td>{{ $row->options->has('product_attribute_name') ? $row->options->product_attribute_name : '' }}</td>
          <td class='text-right'>{{ number_format( $row->price,2,',','.' ) }}</td>
          <td>
            <input type='hidden' name='rowId[]' class='rowId' value='{{ $row->rowId }}' />
            <input type='number' name='qty[]' class='qty' min='1' value='{{ $row->qty }}' />
          </td>
          <td class='text-right' id="subtotal_{{$row->rowId}}">{{ number_format( $row->qty * $row->price,2,',','.' ) }}</td>
          <td>
            <a href="javascript:void(0);" data-rowid="{{$row->rowId}}" onclick="cart_delete(this)" class="cart_delete">Delete</a>
          </td>
        </tr>
        <?php $i++; ?>
      @endforeach
    </tbody>
    <tfoot>
          <tr>
              <td colspan="4">&nbsp;</td>
              <td>Total</td>
              <td class='text-right' id="cart_total">{{ Cart::total(2, ',', '.') }}</td>
          </tr>
          <tr>
              <td colspan="5"><a href="{{ url('/shop') }}">Continue Shopping</a></td>
              <td><button type="submit" class='btn'>Update Cart</button></td>
              <td><a href="{{ url('/checkout') }}" class='btn btn-info'>Checkout</a></td>
          </tr>
      </tfoot>
    </table>

{!! Form::close() !!}

Oke ini ada javascriptnya saya pisahin seperti kode dibawah ini:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function cart_delete( elm ) {
  var rowId = $(elm).data('rowid');
  console.log(rowId);
  var notif = confirm('Are you sure?');
  if(notif) {
    var token = '{{ csrf_token() }}';
        var my_url = base_url + '/cart_delete';
        var formData = {
          '_token': token,
          'rowId': rowId
        };

    $.ajax({
            type: 'POST',
            url: my_url,
            data: formData,
            dataType: 'json',
            success: function (data) {
              console.log(data);
                if(data) {
                  $('#cart_total').html(data.cart_total);
                  $(elm).closest('tr').remove();
                } else {

                }
            }
        });
  } else {

  }
}

Fungsi ini di panggil ketika ada link delete dengan melempar “elm” yang artinya element dari link delete sebagai parameter di fungsi delete tersebut. Kasus ini, saya sisipkan rowId di link tersebut lalu saya panggil element dengan data attribute.

base_url itu sebenernya variable yang isinya adalah

1
{{url('/')}}

di Laravel, kalau di CI itu

1
base_url();

Data yang dikirim ada tambahan, kita mesti melempar token si Laravel. Caranya bagaimana? coba liat _token diatas ya. Kalo ga ditambah, saya yakin error, tapi kalo ga ketemu error gak asik, cobain aja errornya gemana biar bisa kenalan, klo udah kenal kan gampang kalo handle ketemu lagi πŸ˜€

Lalu dari view dan javascriptnya, routes tangkep dan Controller yang handle. Gemana cara nangkep variablenya?

Begini method cart_delete nya:

1
2
3
4
5
6
7
public function cart_delete() {
    $rowId = \Request::input('rowId');
    $cart = Cart::get($rowId);
    if(count($cart) > 0) Cart::remove($rowId);
    $result = array('cart_total' => Cart::total(2, ',', '.') );
    return response()->json($result, 200);
}

Ambil variable rowId yang tadi dikirim, lalu cek di session cart ada tidak sessionya. Kalau ada hapus, lalu keluarkan total cart karena ada cart yang dihapus.

Sederhana ya?
Mudah-mudahan bisa bermanfaat πŸ™‚

One thought on “Laravel mengirim data via Ajax”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.