Kembali lagi ke Laravel, Tutorial kali ini akan membahas tentang membuat sebuah modal dengan JS.
Pembuatan modal ini akan menggunakan framework css dari bootstrap untuk mempermudah membuatnya.
Oke langsung saja kita praktekkan tutorialnya,
Pertama, buat route baru untuk project 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');
});
.
.
.
Selanjutnya, buat file controller baru dengan nama Js5Controller.php pada path protected/app/controllers/belajar_js/ dan isikan code berikut,
<?php namespace Controller\belajar_js;
use \View;
Class Js5Controller Extends \BaseController
{
public function Index()
{
return View::make('web/java-script5');
}
}
Kemudian buat file view baru dengan nama java-script5.blade.php pada path protected/app/views/web/ dan isikan code berikut,
@extends('layouts/web/master')
<?php $title = 'Java Script 5' ?>
@section('style')
@stop
@section('script')
{{ HTML::script('public/js/js5.js') }}
@stop
@section('content')
<div class="isi">
<h4>Belajar java script 5</h4>
<br>
<label>Show and Hide Modal</label>
<br><br>
<button onclick="showModal(this)">Show Modal</button>
</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>isi modal</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
@stop
Setelah itu buat file js baru dengan nama js5.js pada path public/js/ dan isikan code berikut,
function showModal(button)
{
var modal = $('#test-modal');
// Show Modal
modal.modal({backdrop: 'static', keyboard: false});
}
Terakhir edit file header.blade.php dan master.blade.php pada path protected/app/views/layouts/web/ menjadi seperti ini,
- 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>
<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>
</div>
</div>
.
.
.
- master.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
@if($title)
{{ $title }}
@else
Codedoct.com
@endif
</title>
<!-- Custom Style -->
@section('style')
@show
{{ HTML::style('public/css/master/main.css') }}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Custom Scripts -->
@section('script')
@show
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
@include('layouts.web.header')
@yield('content')
<!-- modal -->
@section('modal')
@show
@include('layouts.web.footer')
</body>
</html>
Sehingga tampilannya akan tampak seperti ini,
Silahkan pahami sendiri codenya...
===DONE!===
