Laravel - Tutorial Java Script 6 (Ajax)

Setelah pada tutorial sebelumnya kita sudah belajar tentang hide and show modal, tutorial kali ini akan mempelajari tentang operation CRUD pada Java Script menggunakan Ajax.

Tutorial kali ini akan jauh lebih sulit dibandingkan tutorial JS sebelumnya, tapi jika kita bisa memahami codenya maka kita sudah bisa dikatakan "PRO" dalam hal pengcodingan JS.

Jadi, berusahalah untuk memahami codenya.

Oke langsung saja kita praktekkan tutorialnya,

Pertama, silahkan migrate dulu table baru dengan nama java_script_6 jika lupa caranya bisa lihat disini, kemudian file migrate java_script_6 dengan code berikut,

<?php

use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class JavaScript6 extends Migration {

 /**
  * Run the migrations.
  *
  * @return void
  */
 public function up()
 {
  Schema::create('java_script_6', function($table){
     $table->increments('id');
     $table->text('test_ajax');
     $table->timestamps();
  });
 }

 /**
  * Reverse the migrations.
  *
  * @return void
  */
 public function down()
 {
  Schema::drop('java_script_6');
 }

}

Buat juga modelnya untuk tabel java_script_6 dengan menambahkan file model JavaScript6.php pada path protected/app/models/ isi dengan code berikut,

<?php namespace Model;

use Illuminate\Auth\UserTrait;
use Illuminate\Auth\UserInterface;
use Illuminate\Auth\Reminders\RemindableTrait;
use Illuminate\Auth\Reminders\RemindableInterface;
use \Eloquent;

class JavaScript6 extends Eloquent implements UserInterface, RemindableInterface {

 use UserTrait, RemindableTrait;

 /**
  * The database table used by the model.
  *
  * @var string
  */
 protected $table = 'java_script_6';

 /**
  * The attributes excluded from the model's JSON form.
  *
  * @var array
  */
 protected $hidden = array('password', 'remember_token');

}

Jika sudah, tabel tidak usah di seeder dan cek apakah tabel sudah dibuat atau belum dengan mengecek tabel pada localhost/phpmyadmin.

Selanjutnya, buat route baru 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');
 });
});
.
.
.

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

<?php namespace Controller\belajar_js;

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

use Model\JavaScript6;

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

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

 public function addTestAjax()
 {
  if(Request::ajax()){
   $response['status'] = 'Table java_script_6 not found';
   $javascript6 = JavaScript6::all();

   if ($javascript6) {
    $response['status'] = 'OK';
    $addtext            = new JavaScript6;
    $addtext->test_ajax = \Input::get('test_ajax');
    
    $addtext->save();

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

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

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

@extends('layouts/web/master')

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

@section('style')
@stop

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

@section('content')
<div class="isi">
 <h4>Belajar java script 6 sebelum proses ajax</h4>
 <br>
 <label>Play with Ajax</label>
 <br><br>
 <button onclick="showModal(this)">Add text</button><br><br>
 @if($content['test_ajaxs'])
  @foreach($content['test_ajaxs'] as $test_ajax)
   <label>{{ $test_ajax['test_ajax'] }} </label>
  @endforeach
 @endif
</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>isi modal</label>
     <div class="form-group">
      <input type="text" name="test_ajax" class="form-control">
     </div>
    </div>
    <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <button onclick="addTestAjax(this)" type="button" class="btn btn-success">Save</button>
    </div>
   </div>
  </div>
 </div>
@stop

Buat juga file js baru dengan nama js6.js pada path public/js/ isi dengan code berikut,

function showModal(button)
{
 var modal  = $('#test-modal');
 
 // Show Modal
 modal.modal({backdrop: 'static', keyboard: false});
}

function addTestAjax(button)
{
 var modal = $('#test-modal');
 var test_ajax = modal.find('input[name=test_ajax]').val();

 $.ajax({
  url: '',
  type: 'POST',
  data: {test_ajax: 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

.
.
.
      <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>
      </div>
.
.
.

Buat juga folder baru dengan nama templates pada path protected/app/views/web/ kemudian isi dengan file baru dengan nama javascript6.blade.php isi dengan code berikut,

<h4>Belajar java script 6 setelah proses ajax</h4>
<br>
<label>Play with Ajax</label>
<br><br>
<button onclick="showModal(this)">Add text</button><br><br>
@if($content['test_ajaxs'])
 @foreach($content['test_ajaxs'] as $test_ajax)
  <label>{{ $test_ajax['test_ajax'] }} </label>
 @endforeach
@endif

Jangan lupa compile file composer lihat disini pada bab composer.
Sehingga tampilan akhirnya akan tampak seperti ini,

===DONE!===