Laravel - Tutorial Java Script 7 (Expert Java Script)

Pada tutorial sebelumnya kita sudah belajar membuat operation CRUD pada Java Script menggunakan Ajax kali ini kita akan menyempurnakan tutorial tersebut menjadi lebih complex , dan tentunya lebih menantang, hehe,.,

Tutorial kali ini merupakan tutorial terakhir dari chapter 4 yang merupakan chapter Java Script for Laravel, tutorial kali ini akan lebih menitik beratkan pada penggunaan fungsi-fungsi jQuerynya..

Oke, langsung saja kita praktekkan tutorialnya..

Pertama, buat route baru untuk project kita yang baru ini, dengan mengedit file web.php pada path protected/app/routes/ menjadi seperti ini,

.
.
.
Route::group(array('prefix' => 'javaScript'), function(){
 Route::get('js1', 'Controller\belajar_js\Js1Controller@Index');
 Route::get('js2', 'Controller\belajar_js\Js2Controller@Index');
 Route::get('js3', 'Controller\belajar_js\Js3Controller@Index');
 Route::get('js4', 'Controller\belajar_js\Js4Controller@Index');
 Route::get('js5', 'Controller\belajar_js\Js5Controller@Index');
 Route::group(array('prefix' => 'js6'), function(){
  Route::get('', 'Controller\belajar_js\Js6Controller@Index');
  Route::post('', 'Controller\belajar_js\Js6Controller@addTestAjax');
 });
 Route::group(array('prefix' => 'js7'), function(){
  Route::get('', 'Controller\belajar_js\Js7Controller@Index');
  Route::post('', 'Controller\belajar_js\Js7Controller@update');
 });
});
.
.
.

Selanjutnya, buat file controller baru dengan nama Js7Controller.php pada path protected/app/controllers/belajar_js/ isi dengan code berikut,

<?php namespace Controller\belajar_js;

use \View;
use \Response;
use \Request;
use \Input;

use Model\JavaScript6;

Class Js7Controller Extends \BaseController
{
 public function Index()
 {
  $test_ajaxs = JavaScript6::all();
  $content['test_ajaxs'] = $test_ajaxs; 

  return View::make('web/java-script7')
     ->with('content', $content);
 }

 public function update()
 {
  if(Request::ajax()){
   $response['status'] = 'That id not found at table java_script_6';
   $javascript6 = JavaScript6::find(Input::get('id_testajax'));

   if ($javascript6) {
    $response['status'] = 'OK';

    $javascript6->test_ajax = Input::get('content_testajax');
    $javascript6->update();

    $javascript6_now = JavaScript6::all();
    $content['test_ajaxs'] = $javascript6_now;

    $response['html'] = View::make('web/templates/javascript7')
         ->with('content', $content)
         ->render();
   } 
   return Response::json($response);
  }
  App::abort(404);
 }
}

Kemudian, buat file blade baru dengan nama java-script7.blade.php pada path protected/app/views/web/ isi dengan code berikut,

@extends('layouts/web/master')

<?php $title = 'Java Script 7' ?>

@section('style')
@stop

@section('script')
 {{ HTML::script('public/js/js7.js') }}
@stop

@section('content')
<div class="isi">
 <h4>Belajar java script 7 sebelum proses ajax</h4>
 <br>
 <label>Expert programmer Java Script!!!</label>
 <br><br>
 <div class="row">
  <div class="col-md-5">
   <div class="form-group">
    <label>Choose what do you want to edit</label>
    <select class="form-control" name="test_ajax" onchange="lemparKeDataTestAjax(this)">
     <option value=""></option>
     @foreach($content['test_ajaxs'] as $test_ajax)
      <option type="button" value="{{ $test_ajax['id'] }}">{{ $test_ajax['test_ajax'] }}</option>
     @endforeach
    </select>
   </div>
   <button onclick="editContent(this)" data-id-testajax="" data-content-testajax="" type="button">Edit</button>
  </div>
 </div>
</div>
@stop

@section('modal')
 <div class="modal fade" id="test-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-md">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
     <h4 class="align-center">Header Modal</h4>
    </div>
    <div class="modal-body">
     <label>Edit content test ajax</label>
     <input type="hidden" name="id_testajax" value="">
     <div class="form-group">
      <input type="text" name="content_testajax" class="form-control">
     </div>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <button onclick="updateContentTestAjax(this)" type="button" class="btn btn-success">Save</button>
    </div>
   </div>
  </div>
 </div>
@stop

Buat juga file blade templateya dengan nama javascript7.blade.php pada path protected/app/views/web/templates/ isi dengan code berikut,

<h4>Belajar java script 7 setelah proses ajax</h4>
<br>
<label>Expert programmer Java Script!!!</label>
<br><br>
<div class="row">
 <div class="col-md-5">
  <div class="form-group">
   <label>Choose what do you want to edit</label>
   <select class="form-control" name="test_ajax" onchange="lemparKeDataTestAjax(this)">
    <option value=""></option>
    @foreach($content['test_ajaxs'] as $test_ajax)
     <option type="button" value="{{ $test_ajax['id'] }}">{{ $test_ajax['test_ajax'] }}</option>
    @endforeach
   </select>
  </div>
  <button onclick="editContent(this)" data-id-testajax="" data-content-testajax="" type="button">Edit</button>
 </div>
</div>

Setelah itu, buat file js baru dengan nama js7.js pada path public/js/ isi dengan code berikut,

function lemparKeDataTestAjax(button)
{
 var id_data_lempar = $(button).val();
 var content_data_lempar = $(button).find('option:selected').text();

 //lempar ke
 $('.isi').find('button').data('id-testajax', id_data_lempar);
 $('.isi').find('button').data('content-testajax', content_data_lempar);
}

function editContent(button)
{
 var modal  = $('#test-modal');
 var id_test_ajax = $(button).data('id-testajax');
 var content_test_ajax = $(button).data('content-testajax');

 // Show Modal
 if (id_test_ajax == '') {
  alert('Please choose content that will edit');
 } else {
  modal.modal({backdrop: 'static', keyboard: false});
  modal.find('input[name=id_testajax]').val(id_test_ajax);
  modal.find('input[name=content_testajax]').val(content_test_ajax);
 }
}

function updateContentTestAjax(button)
{
 var modal = $('#test-modal');
 var content_test_ajax = modal.find('input[name=content_testajax]').val();
 var id_test_ajax = modal.find('input[name=id_testajax]').val();

 $.ajax({
  url: '',
  type: 'POST',
  data: {
   id_testajax: id_test_ajax,
   content_testajax: content_test_ajax
  },
  beforeSend: function(){
   modal.find('button').prop('disabled', true);
  }
 })
 .done(function(response) {
  if (response['status'] == 'OK') {
   modal.find('button').prop('disabled', false);
   modal.modal('hide');
   $('.isi').html(response['html']);
  };
 });
}

Terakhir edit file header.blade.php pada path protected/app/views/layouts/web/ menjadi seperti ini,

.
.
.
   <li>
    <div class="dropdown">
      <button class="button">Menu(css)</button>
      <div class="dropdown-content">
        <a href="{{ URL::to('crud/users')}}">User</a>
        <a href="{{ URL::to('book')}}">Index Book</a>
        <a href="{{ URL::to('javaScript/js1')}}">Belajar Script</a>
        <a href="{{ URL::to('javaScript/js2')}}">Belajar Script2</a>
        <a href="{{ URL::to('javaScript/js3')}}">Belajar Script3</a>
        <a href="{{ URL::to('javaScript/js4')}}">Belajar Script4</a>
        <a href="{{ URL::to('javaScript/js5')}}">Belajar Script5</a>
        <a href="{{ URL::to('javaScript/js6')}}">Belajar Script6</a>
        <a href="{{ URL::to('javaScript/js7')}}">Belajar Script7</a>
      </div>
    </div>
   </li>
.
.
.

Jangan lupa compile file composer, lihat disini pada bab composer.

Sehingga tampilan akhirnya akan terlihat seperti ini,

===DONE!!!===