Membuat Include File header, artikel, sidebar dan footer dengan JSP

Membuat Include File header, artikel, sidebar dan footer dengan JSP

Include merupakan suatu pemanggilan yang digunakan untuk memanggil file lainnya kedalam file tersebut, dengan include maka akan memudahkan dalam mengontrol data, karena file yang ditampilkan sangat sedikit dan mempunyai beberapa file fixed jadi sewaktu ingin mengedit syntax maka tidak perlu dilakuan pengeditan satu per satu pada halaman tetapi cuma edit file yang bersangkutan misalnya mengedit header.jsp nya saja maka otomatis halaman yang mempunyai include header.jsp akan terubah sendiri.

file-include-jsp-2042016

Buatlah sebuah project pada ide jsp atau yang lebih mudah gunakan saja netbeans atau eclipse tetapi disini penulis menggunakan netbeans, dengan nama project terserah anda namun disini penulis menggunakan nama IncludeJSP dan buatlah folder-folder pada Web Pages yaitu images, scripts dan styles. Untuk folder images maka isikan gambar dibawah ini.

bg-include-jsp-2042016

header-include-jsp-2042016

Selanjutnya buka folder styles dan buatlah sebuah file dengan klik new file -> pilih other -> pilih cascading style sheet dan berinama style (style.css), untuk syntaxnya seperti dibawah ini.

*{
margin: auto;
padding: 0;
}
body{
font-family: helvetica;
background: url(../images/bg.png);
}
#con{
width: 1024px;
padding: 10px;
background: #ffffff;
}
header{
background: url(../images/header.png);
width: 1024px;
height: 250px;
}
nav{
background: -linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
background: -moz-linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
background: -webkit-linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
-svg-background: -linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
width: 1024px;
height: 40px;
margin-top: 10px;
}
nav ul{
list-style-image: none;
padding-left: 10px;
}
nav ul li{
display: inline-block;
padding: 10px;
}
nav ul li a{
text-decoration: none;
color: #fff;
}
nav ul li a:hover{
color: #ff0;
}
nav ul li a:active{
color: #f00;
}
.row{
display: table-row;
}
.cell{
display: table-cell;
}
.artikel{
width:744px;
min-height: 400px;
padding: 10px;
}
.sidebar{
width:250px;
min-height: 400px;
padding-right: 10px;
padding-top: 10px;
padding-left: 10px;
}
footer{
text-align: center;
font-size: 10pt;
color: #00b800;
}
#aside{
width: 250px;
}
.titside{
width: 240px;
background: -linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
background: -moz-linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
background: -webkit-linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
-svg-background: -linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
padding: 10px;
text-align: center;
color: #ffff00;
margin-bottom: 10px;
}
#aside ul{
list-style-image: none;
padding-left: 30px;
}
#aside ul li{
padding-left: 5px;
}
#aside ul li a{
text-decoration: none;
color: #008800;
}
.formulir{
width: 500px;
}
.formulir label{
display: inline-block;
width: 150px;
}
.formulir input[type=text]{
width: 300px;
margin-bottom: 10px;
}
table{
border: 1px solid #009900;
}
tr td{
border: 1px solid #009900;
}
tr th{
background: -linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
background: -moz-linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
background: -webkit-linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
-svg-background: -linear-gradient(top, #38d800 0%, #00b800 40%, #006b00 100%);
color: #ffff00;
}

Selanjutnya kembali kepada Web Pages dan buatlah file-file baru seperti nama file yang dibawah ini beserta syntaxnya sekaligus tinggal di kopi pastekan kedalam project anda.

header.jsp

<head>
<title>judul</title>
<link href="styles/style.css" rel="stylesheet"/>
</head>
<body>
<div id="con">
 <header>
 </header>
 <nav>
 <ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Feature</a></li>
  <li><a href="#">Article</a></li>
  <li><a href="#">Documentation</a></li>
  <li><a href="#">Download</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Help</a></li>
 </ul>
 </nav>
 <div class="row">
 <div class="cell artikel">

artikel.jsp

<h1>Title Heading</h1>
 <h6>Post by Ghazali</h6>
 <p>Membuat artikel baru dengan template biasa</p><br/>
 <form method="post" action="">
 <p class="formulir">
 <label>Input Pertama</label>
 <input type="text"/>
 </p>
 <p class="formulir">
 <label>Input Kedua</label>
 <input type="text"/>
 </p>
 <p class="formulir">
 <label>Input Ketiga</label>
 <input type="text"/>
 </p>
 <p class="formulir">
 <label></label>
 <input type="submit" value="Masuk"/>
 <input type="reset" value="Bersih"/>
 </p>
 </form>
 <br/>
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
   <th>ID</th>
   <th>Nama</th>
   <th>Alamat</th>
   <th>Jenis Kelamin</th>
   <th>Keterangan</th>
  </tr>
  <tr>
   <td>145</td>
   <td>Ghazali</td>
   <td>Pidie</td>
   <td>Laki-laki</td>
   <td>Programmer</td>
  </tr>
  <tr>
   <td>145</td>
   <td>Ghazali</td>
   <td>Pidie</td>
   <td>Laki-laki</td>
   <td>Programmer</td>
  </tr>
  <tr>
   <td>145</td>
   <td>Ghazali</td>
   <td>Pidie</td>
   <td>Laki-laki</td>
   <td>Programmer</td>
  </tr>
  <tr>
   <td>145</td>
   <td>Ghazali</td>
   <td>Pidie</td>
   <td>Laki-laki</td>
   <td>Programmer</td>
  </tr>
  <tr>
   <td>145</td>
   <td>Ghazali</td>
   <td>Pidie</td>
   <td>Laki-laki</td>
   <td>Programmer</td>
  </tr>
 </table>
 <br/>

sidebar.jsp

</div>
 <div class="cell sidebar">
 <div id="aside">
  <div class="titside">Vertical Menu</div>
  <ul>
  <li><a href="#">Home Page</a></li>
  <li><a href="#">Tautan Halaman</a></li>
  <li><a href="#">Artikel Bayak</a></li>
  <li><a href="#">Petunjuk</a></li>
  <li><a href="#">Contact</a></li>
  </ul>
 </div>
 </div>
 </div>

footer.jsp

<footer>Copyright © by Ghazali Pidie</footer>
</div>
</body>

index.jsp

<%-- 
    Document   : index
    Created on : Feb 23, 2014, 8:50:24 PM
    Author     : ghazali
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <%@ include file="header.jsp" %>
    <%@ include file="artikel.jsp" %>
    <h1>Artikel Pendek</h1>
    <jsp:include page="teks.txt" /> 
    <h6>Posting by Teuku Ghazali Pidie</h6>
    <%@ include file="sidebar.jsp" %>
    <%@ include file="footer.jsp" %>
</html>

teks.txt

untuk text buatlah artikel sesuka hati anda

Sekian tutorial kali ini untuk selanjutnya silahkan anda kotak katik, untuk hasilnya bisa dilihat pada gambar yang ada dibawah ini, semoga bermanfaat.

hasil-include-jsp-2042016

Download Source Code

Tags: ,