Laravel - Tutorial Java Script 2 (Hide and Show Class)

Java Script memang benar-benar sangat mengasyikan, ada banyak sekali yang akan kita bahas pada Java Script sehingga codedoct.com akan membahasnya pada satu chapter full pada Laravel.

Jika pada tutorial kemarin kita sudah belajar cara hide and show pada JS, kali ini kita akan memanipulasi Class pada JS untuk keperluan hide and show.

Oke langsung saja kita mulai prakteknya.

Pertama, buat dulu route baru untuk halaman 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');
});
.
.
.

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

<?php namespace Controller\belajar_js;

use \View;
use Model\User;

Class Js2Controller Extends \BaseController
{
 public function Index()
 {
  $users = User::all();

  $content['users'] = $users;

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

Jangan lupa compile file composer lihat disini pada bab composer.

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

@extends('layouts/web/master')

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

@section('style')
 {{ HTML::style('public/css/content/belajar_js/js2.css') }}
@stop

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

@section('content')
<div class="isi">
 <h4>Belajar java script 2</h4>
 <br>
 <label>Hide and Show Class</label>
 <br><br>
 <div class="user-list">
  @if($content['users'])
   @foreach($content['users'] as $user)
    {{ Form::open(array('url' => 'crud/update/'.$user['id'])) }}
    <div class="box-user">
     <table>
      <tbody class="showing">
       <tr>
        <td>Name</td><td>:</td><td>{{ $user['name'] }}</td>
       </tr>
       <tr>
        <td>Username</td><td>:</td><td>{{ $user['username'] }}</td>
       </tr>
       <tr>
        <td>Email</td><td>:</td><td>{{ $user['email'] }}</td>
       </tr>
      </tbody>
      <tbody class="editing hidden">
       <tr>
        <td>Name</td><td>:</td><td><input type="text" name="name" value="{{ $user['name'] }}"></td>
       </tr>
       <tr>
        <td>Username</td><td>:</td><td><input type="text" name="username" value="{{ $user['username'] }}"></td>
       </tr>
       <tr>
        <td>Email</td><td>:</td><td><input type="text" name="email" value="{{ $user['email'] }}"></td>
       </tr>
      </tbody>
     </table>
     <div class="tombol">
      <div class="edit">
       <button type="button" onclick="edit(this, event)">Edit</button>
      </div>
      <div class="save hidden">
       <button type="button" onclick="back(this, event)">Return</button>
       <input type="submit" class="btn" value="Save">
      </div>
     </div>
    </div>
    {{ Form::close() }}
   @endforeach
  @else
   <label>Data user empty ...</label>
  @endif
 </div>
</div>
@stop

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

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

 e.preventDefault();

 $(button).closest('.tombol').find('.edit').addClass('hidden');
 $(button).closest('.box-user').find('.showing').addClass('hidden');

 $(button).closest('.tombol').find('.save').removeClass('hidden');
 $(button).closest('.box-user').find('.editing').removeClass('hidden');
}
function back(button,event)
{
 var e = event || window.event;

 e.preventDefault();

 $(button).closest('.tombol').find('.save').addClass('hidden');
 $(button).closest('.box-user').find('.editing').addClass('hidden');

 $(button).closest('.tombol').find('.edit').removeClass('hidden');
 $(button).closest('.box-user').find('.showing').removeClass('hidden');
}

Buat file sass baru dengan nama js2.scss pada path public/css/content/belajar_js/ isi dengan code berikut,

.user-list{
 width: 350px;
 margin: 0 60px;
 .box-user{
  background-color: #F3F5F7;
  border: 1px solid #ddd;
  border-radius: 2px;
  margin-bottom: 30px;
  padding: 20px;
  .tombol{
   margin-top: 10px;
   text-align: right;
  }
 }
}

Dan edit pula file sass main.scss dengan menambahkan code berikut,

.
.
.
.hidden{
 display: none;
}
.
.
.

Jangan lupa untuk mengcompile file sass lihat disini.

Terakhir edit file header.blade.php pada path protected/app/views/layouts/web/ tambahkan code berikut,

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

Sehingga tampilannya akan tampak seperti ini

===DONE!===