Laravel - Tutorial Java Script 3 (Follow and Unfollow Toggle Button)

Selamat malam minggu,,,

Kali ini saya akan meneruskan tutorial Laravel chapter 4 yaitu tentang Java Script,,

Melanjutkan tutorial yang kemarin, tutorial kali ini akan membahas tentang membuat sebuah button Follow, dengan konsep "hide and show  with data-JS", dalam hal ini kita akan menyematkan sebuah kondisi pada code JS.

Oke kita langsung saja praktekkan tutorialnya.

Pertama, buat sebuah route baru dengan mengedit file web.php pada path protected/app/routes/ edit 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');
});
.
.
.

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

<?php namespace Controller\belajar_js;

use \View;
use Model\User;

Class Js3Controller Extends \BaseController
{
 public function Index()
 {
  return View::make('web/java-script3');
 }
}

Jangan lupa compile file composer lihat disini pada bab composer.

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

@extends('layouts/web/master')

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

@section('style')
@stop

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

@section('content')
<div class="isi">
 <h4>Belajar java script 3</h4>
 <br>
 <label>Hide and Show Class With Data JS</label>
 <br><br>
 Example: button follow and unfollow <br><br>
 <button onclick="toggleFollow(this,event)" data-action="follow">Follow</button>
</div>
@stop

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

function toggleFollow(button, event)
{
 var e = event || window.event;

 e.preventDefault();

 var action = $(button).attr('data-action');

 if (action == 'follow') {
  action_new = 'unfollow';
  $(button).html('Unfollow');
 } else if (action == 'unfollow'){
  action_new = 'follow';
  $(button).html('Follow');
 }
 $(button).attr('data-action', action_new);
}

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

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

Sehingga tampilannya akan tampak seperti ini.

===DONE!===