Pada tutorial sebelumya, kita sudah menambahan css framework bootstrap pada website. Sehingga ada beberapa tampilan website akan rusak, seperti bagian header ini.
Sekarang saatnya untuk memperbaiki design yang rusak tersebut sekaligus belajar bootstrap, hehe..
Oke langsung saja kita praktekkan,
Silahkan bandingkan code-code dibawah ini dengan dengan file pada path aslinya, silahkan ganti code yang berubah dengan code-code dibawah ini, dan jangan lupa pelajari code-code yang telah diubah untuk menyesuaikan design css framework bootstrap.
Edit file main.scss pada path public/css/master menjadi seperti ini,
body {
margin: 0 0 0 0;
width: 100%;
background-color: #e9eaee !important;
text-align: center;
}
.hidden{
display: none;
}
.isi{
/* sesuaikan untuk bootstrap */
margin: 2%;
/*---------------------------*/
padding: 20px 2%;
text-align: left;
width: 96%;
border-radius: 5px;
background-color: white;
border: 1px solid #e1e8ed;
overflow: auto;
}
@import 'header';
@import 'footer';
Edit file _header.scss pada path public/css/master menjadi seperti ini.
.header{
text-align: left;
margin-top: 10px;
width: 100%;
/* sesuaikan untuk bootstrap */
height: 230px;
/*---------------------------*/
background-color: white;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
.banner{
text-align: center;
width: 100%;
height: 129px;
.welcome{
padding-top: 60px;
float: left;
width: 40%;
text-align: right;
}
.gambar{
float: left;
width: 20%;
}
}
}
.menu{
margin-top: 0;
width: 90%;
margin-right: 5%;
margin-left: 5%;
.kiri{
float: left;
width: 50%;
text-align: left;
li{
list-style: none;
display: inline;
margin-right: 5px;
/*css for dropdown script*/
.dropdown-script{
position: relative;
display: inline-block;
a{
&:hover{
background-color: #ededed;
color: black;
cursor: pointer;
}
}
}
.dropdown-content-script{
display: none;
position: absolute;
background-color: #e5e5e5;
min-width: 150px;
overflow: auto;
border-radius: 5px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
}
.show{
display: block;
}
/*end*/
}
.dropdown {
position: relative;
display: inline-block;
&:hover .dropdown-content{
display: block;
}
&:hover .button{
color: lighten(black, 10%);
text-decoration: none;
background-color: #ededed;
}
}
.dropdown-content {
border-radius: 3px;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
a{
color: black;
padding: 10px 20px;
text-decoration: none;
display: block;
&:hover{
background-color: #e5e5e5;
}
}
}
}
.kanan{
float: right;
width: 50%;
text-align: right;
li{
display: inline-block;
background-color: #e5e5e5;
margin-right: 5px;
display: inline-block;
cursor: pointer;
padding: 10px 20px;
border-radius: 3px;
box-shadow: 0 1px 1px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
&:hover {
color: lighten(black, 10%);
text-decoration: none;
background-color: #ededed;
}
}
}
}
jangan lupa untuk mengcompile file sass dengan mengetikkan code seperti ini pada terminal atau powershell.
sass --watch main.scss:main.css
Edit file book.blade.php pada path protected/app/views/ menjadi seperti ini.
@extends('layouts/web/master')
<?php $title = "Book" ?>
@section('style')
{{ HTML::style('public/css/book.css') }}
@stop
@section('script')
<script>
//offset anchor tags with fixed header and smooth scroll
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 60 //offset height
}, 500);
return false;
}
}
});
//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var target = $('#'+location.href.split("#")[1]);
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 60 //offset height
}, 500);
return false;
}
}
});
</script>
@stop
@section('content')
<div class="isi">
<div class="daftar-isi">
<h2>My Book</h2>
<ul>
<li><a href="#test1">Test 1</a></li>
<li><a href="#test2">Test 2</a></li>
<li><a href="#test3">Test 3</a></li>
<li><a href="#test4">Test 4</a></li>
</ul>
</div>
<!-- Begin book -->
<div class="book">
<div id="test1">
<h4>Test 1</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
</div>
<div id="test2">
<h4>Test 2</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
</div>
<div id="test3">
<h4>Test 3</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
</div>
<div id="test4">
<h4>Test 4</h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam saepe voluptatem veritatis expedita nihil dolores, distinctio aperiam. Necessitatibus vitae molestias natus fugiat rerum sequi enim nam, nesciunt, et quam asperiores.
</div>
</div>
</div>
@stop
Edit file java-script7.blade.php pada path protected/app/views/web/ menjadi seperti ini.
@extends('layouts/web/master')
<?php $title = 'Java Script 7' ?>
@section('style')
@stop
@section('script')
{{ HTML::script('public/js/js7.js') }}
@stop
@section('content')
<div class="isi">
<h4>Belajar java script 7 sebelum proses ajax</h4>
<br>
<label>Expert programmer Java Script!!!</label>
<br><br>
<div class="clearfix">
<div class="form-group">
<label>Choose what do you want to edit</label>
<select class="form-control" name="test_ajax" onchange="lemparKeDataTestAjax(this)">
<option value=""></option>
@foreach($content['test_ajaxs'] as $test_ajax)
<option type="button" value="{{ $test_ajax['id'] }}">{{ $test_ajax['test_ajax'] }}</option>
@endforeach
</select>
</div>
<button class="btn btn-primary" onclick="editContent(this)" data-id-testajax="" data-content-testajax="" type="button">Edit</button>
</div>
</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>Edit content test ajax</label>
<input type="hidden" name="id_testajax" value="">
<div class="form-group">
<input type="text" name="content_testajax" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button onclick="updateContentTestAjax(this)" type="button" class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
@stop
Edit file template javascript7.blade.php pada path protected/app/views/web/templates/ menjadi seperti ini.
<h4>Belajar java script 7 setelah proses ajax</h4>
<br>
<label>Expert programmer Java Script!!!</label>
<br><br>
<div class="clearfix">
<div class="form-group">
<label>Choose what do you want to edit</label>
<select class="form-control" name="test_ajax" onchange="lemparKeDataTestAjax(this)">
<option value=""></option>
@foreach($content['test_ajaxs'] as $test_ajax)
<option type="button" value="{{ $test_ajax['id'] }}">{{ $test_ajax['test_ajax'] }}</option>
@endforeach
</select>
</div>
<button class="btn btn-primary" onclick="editContent(this)" data-id-testajax="" data-content-testajax="" type="button">Edit</button>
</div>
Edit file hello.blade.php pada path protected/app/views/web/ menjadi seperti ini.
@extends('layouts/web/master')
@section('script')
@stop
@section('content')
<?php $title = "Welcome" ?>
@stop
Edit file master.blade.php pada path protected/app/views/layouts/web/ menjadi seperti ini.
<!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
{{ HTML::script('public/js/dropdown-menu.js') }}
<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>
Edit file readUser.blade.php pada path protected/app/views/web/ menjadi seperti ini.
@extends('layouts/web/master')
@section('content')
<?php $title = "User" ?>
<div class="isi">
<div class="row">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>USERNAME</th>
<th>EMAIL</th>
<th>PASSWORD</th>
<th>CREATED AT</th>
<th>UPDATED AT</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
@foreach($data_user as $users)
<tr>
<td>{{ $users->id }}</td>
<td>{{ $users->name }}</td>
<td>{{ $users->username }}</td>
<td>{{ $users->email }}</td>
<td>{{ $users->password }}</td>
<td>{{ $users->created_at }}</td>
<td>{{ $users->updated_at }}</td>
<td>
<a href="{{ URL::to('crud/update/'.$users->id) }}">Edit<br>
<a href="{{ URL::to('crud/delete/'.$users->id) }}">Delete
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<br>
<button class="btn btn-default" onclick="location.href='{{ URL::to('crud/create') }}';">Create</button>
</div>
@stop
Edit file java-script2.blade.php pada path protected/app/views/web/ menjadi seperti ini.
@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" class="btn btn-default" onclick="edit(this, event)">Edit</button>
</div>
<div class="save hidden">
<button type="button" class="btn btn-default" onclick="back(this, event)">Return</button>
<input type="submit" class="btn btn-success" value="Save">
</div>
</div>
</div>
{{ Form::close() }}
@endforeach
@else
<label>Data user empty ...</label>
@endif
</div>
</div>
@stop
Edit file updateUser.blade.php pada path protected/app/views/web/ menjadi seperti ini.
@extends('layouts/web/master')
@section('content')
<?php $title = "Update User" ?>
<div class="isi">
<form method="post" action="">
<table>
<tr>
<td>Name</td>
<td nowrap>:</td>
<td><input type="text" name="name" value="{{ $data_user['name'] }}"><span style="color:red"><?php echo $errors->first('name') ?></td>
</tr>
<tr>
<td>Username</td>
<td nowrap>:</td>
<td><input type="text" name="username" value="{{ $data_user['username'] }}"><span style="color:red"><?php echo $errors->first('username') ?></td>
</tr>
<tr>
<td>Email</td>
<td nowrap>:</td>
<td><input type="text" name="email" value="{{ $data_user['email'] }}"><span style="color:red"><?php echo $errors->first('email') ?></span></td>
</tr>
<tr>
<td colspan="3">
<br>
<input type="submit" class="btn btn-default" value="Save">
</td>
</tr>
</table>
</form>
</div>
@stop
Edit file createUser.blade.php pada path protected/app/views/web/ menjadi seperti ini.
@extends('layouts/web/master')
@section('content')
<?php $title = "Create User" ?>
<div class="isi">
<form method="post" action="">
<table>
<tr>
<td>Name <span class="error"><?php echo $errors->first('name') ?></span></td>
<td nowrap>:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>Username <span class="error"><?php echo $errors->first('username') ?></span></td>
<td nowrap>:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Email <span class="error"><?php echo $errors->first('email') ?></span></td>
<td nowrap>:</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td>Password <span class="error"><?php echo $errors->first('password') ?></span></td>
<td nowrap>:</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td colspan="3">
<br>
<input type="submit" class="btn btn-default" value="Create">
</td>
</tr>
</table>
</form>
</div>
@stop
Terakhir edit header.blade.php pada path protected/app/views/layouts/web/ menjadi seperti ini.
<div class="header">
<div class="banner">
<div class="welcome">Welcome</div>
{{-- code dibawah ini menggunakan constant variabel --}}
<div class="gambar"><a href="#"><img src="{{ IMAGE_HEADER }}" style="width:"100px" height="129px";"></a></div>
</div>
<hr>
<div class="menu">
<div class="kiri">
<li>
<div class="dropdown">
<button class="btn btn-default">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>
<a href="{{ URL::to('javaScript/js6')}}">Belajar Script6</a>
<a href="{{ URL::to('javaScript/js7')}}">Belajar Script7</a>
</div>
</div>
</li>
<li>
<div class="dropdown-script">
<button onclick="myFunction()" class="dropbtn btn btn-default">Menu(css)</button>
<div id="myDropdown" class="dropdown-content-script">
<a href="{{ URL::to('crud/users')}}">User</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</li>
</div>
<div class="kanan">
<li onclick="location.href='{{ URL::to('/') }}';">Login</li>
<li onclick="location.href='{{ URL::to('/') }}';">Cari</li>
</div>
</div>
</div>
Banyak sekali yang kita rombak dan lihat salah satu hasilnya,
===DONE!!!===
