supaya lebih waw hiasi dengan bootstrap
Bismillah
q> Melanjutkan tulisan ini :
https://saifiahmada.wordpress.com/2014/12/11/integrasi-apache-tiles-dengan-spring-mvc/
q> buka halaman http://getbootstrap.com/
q> klik getting started
q> find bootstrap CDN
q> copy script ke dalam file classic.jsp dalam tag head
[sourcecode language="text"]
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="c"><!-- Latest compiled and minified CSS --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"</span><span class="nt">></span>
<span class="c"><!-- Optional theme --></span>
<span class="nt"><link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"</span><span class="nt">></span>
<span class="c"><!-- Latest compiled and minified JavaScript --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"</span><span class="nt">></script></span></code></pre>
</div>
[/sourcecode]
q> ubah DOCTYPE pada file classic.jsp menjadi <!DOCTYPE html>
q> tambahkan script jquery punya goole cdn:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
q> pada halamat getbootstrap.com > cari link example > kemudian cari Navbar in action
q> View Source pada halaman itu, kemudian copy-kan ke file classic.jsp
q> Tambahkan taglib ini
[sourcecode language="xml"]<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>[/sourcecode]
q> file classic.jsp sekarang seperti ini :
[sourcecode language="xml"]
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html>
<html>
<head>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><tiles:getAsString name="title" /></title>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="<spring:url value="/" />">Spring
MVC</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="<spring:url value="/" />">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<tiles:insertAttribute name="body" />
<br> <br>
<center>
<tiles:insertAttribute name="footer" />
</center>
</div>
</body>
</html>
<span style="line-height: 1.5;">[/sourcecode]
q> Test jalankan, hasilnya sekarang :
Alhamdulillah
[…] bootstrap dan spring mvc […]
ReplyDelete