Laravel - Tutorial Java Script (Hide and Show Dropdown)

Akhirnya kita sampai pada chapter laravel yang ke-4.

Pada chapter 4 ini kita akan lebih banyak membahas tentang Java Script, karena menurut saya dengan menggabungkan sebuah project website php dengan Java Script akan membuat website tersebut jauh lebih dinamis dan menarik untuk dilihat.

Pada Bab pertama Laravel chapter 4 ini saja akan memberikan tutorial tentang membuat sebuah program hide and show dropdown dengan menggunakan Java Script.

Program hide and show dropdown ini sangat berguna misalnya dalam membuat index halaman sebuah website contohnya bisa lihat disini.

Oke langsung saja kita praktekan tutorialnya,

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

/////////////////
// java script //
/////////////////
Route::group(array('prefix' => 'javaScript'), function(){
 Route::get('js1', 'Controller\belajar_js\Js1Controller@Index');
});

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

<?php namespace Controller\belajar_js;

use \View;

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

Jangan lupa untuk mengcompile composer nya

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

@extends('layouts/web/master')

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

@section('style')
 {{ HTML::style('public/css/content/js-satu.css') }}
@stop

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

@section('content')
<div class="isi">
 <h4>Belajar java script 1</h4>
 <br>
 <label>Hide and Show</label>
 <ul>
  <a href="#" style="display: none;" class="dropdownHide" onclick="dropdownHide(this,event)">Dropdown Link</a>
  <a href="#" class="dropdownShow" onclick="dropdownShow(this,event)">Dropdown Link</a>
  <ul style="display: none;" class="dropdown">
   <li>Test 1</li>
   <li>Test 2</li>
   <li>Test 3</li>
  </ul>
 </ul>
</div>
@stop

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

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

 e.preventDefault();

 $(button).closest('.isi').find('.dropdownHide').show();
 $(button).hide();
 $(button).closest('.isi').find('.dropdown').show(200);
}
function dropdownHide(button,event)
{
 var e = event || window.event;

 e.preventDefault();

 $(button).closest('.isi').find('.dropdownShow').show();
 $(button).hide();
 $(button).closest('.isi').find('.dropdown').hide(200);
}

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

- header.blade.php

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

- master.blade.php

.
.
.
 <!-- Custom Scripts -->
 @section('script')
 @show
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
.
.
.

Sehingga tampilannya akan tampak seperti ini,

===DONE!===