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">×</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!!!===
