<p>Cara membuat layouting template bootstrap pada umumnya hampir sama disetiap <a href="https://www.tutorialpedia.net">bahasa pemrograman</a>, dan biasanya setiap orang memiliki cara-cara yang berbeda dalam melakukan layouting template bootstrap. Tapi, disini saya akan memberikan cara yang paling sederhana dan sangat mudah dipahami <a href="https://www.tutorialpedia.net" target="_blank">untuk pemula</a>. Pada artikel sebelumnya juga kita telah membahas tentang bagaimana <a href="https://www.tutorialpedia.net/tutorial-cara-menggunakan-bootstrap-untuk-pemula/" target="_blank">cara menggunakan bootstrap</a>, <a href="https://www.tutorialpedia.net/membuat-crud-dengan-java-web-application-menampilkan-data/" target="_blank">membuat crud dengan java web</a>, dan <a href="https://www.tutorialpedia.net/tutorial-lengkap-cara-membuat-web-sederhana-dengan-java/" target="_blank">membuat web sederhana dengan java</a>. Jika anda belum membaca artikel tersebut, sebaiknya anda membacanya terlebih dahulu, Karena pada tutorial membuat layouting template bootstrap ada kaitannya dengan artikel yang sudah sebutkan diatas.</p>
<p>Untuk melakukan layouting template bootstrap pada jsp, ada beberapa hal yang dibutuhkan, yang paling utama yaitu file bootstrap. Anda bisa mengunduhnya melalui link berikut <a href="https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip">Download Bootstrap</a></p>
<p>Setelah di download ekstrak <strong>bootstrap-3.3.7-dist.zip </strong>lalu copy-paste ketiga folder <strong>css,js </strong>dan<strong> fonts </strong>pada project di netbeans tepat di dalam folder <strong>Web Pages</strong>. Baca : <a href="https://www.tutorialpedia.net/membuat-crud-dengan-java-web-persiapan-awal/" target="_blank">Membuat Project Baru di netbeans</a></p>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/2016/12/Screenshot_228.png"><img class="aligncenter size-full wp-image-2691" src="https://www.tutorialpedia.net/wp-content/uploads/2016/12/Screenshot_228.png" alt="layouting template bootstrap" width="411" height="207" /></a></p>
<p>Buat 2 file jsp baru dengan nama <strong>h</strong><strong>eader.jsp </strong>dan<strong> footer.jsp.</strong></p>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/2016/12/Screenshot_229.png"><img class="aligncenter size-full wp-image-2692" src="https://www.tutorialpedia.net/wp-content/uploads/2016/12/Screenshot_229.png" alt="layouting template bootstrap" width="410" height="231" /></a></p>
<p>isi kode <strong>header.jsp</strong></p>
<pre class="lang:default decode:true"><;%@page contentType="text/html" pageEncoding="UTF-8"%>; 
<;!DOCTYPE html>; 
<;html>; 
 <;head>; 
 <;meta http-equiv="Content-Type" content="text/html; charset=UTF-8">; 
 <;title>;Layouting Template Pada Bootstrap | TutorialPedia<;/title>; 
 <;meta name="viewport" content="width=device-width, initial-scale=1.0">; 
 <;!-- Bootstrap -->; 
 <;link href="css/bootstrap.min.css" rel="stylesheet"/>; 
 <;/head>; 
 <;body>; 
 <;!--Kode Navbar-->; 
 <;nav class="navbar navbar-default">; 
 <;div class="container-fluid">; 
 <;!-- Brand and toggle get grouped for better mobile display -->; 
 <;div class="navbar-header">; 
 <;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">; 
 <;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="#">;TutorialPedia.NET<;/a>; 
 <;/div>; 
 
 <;!-- Collect the nav links, forms, and other content for toggling -->; 
 <;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">; 
 <;ul class="nav navbar-nav">; 
 <;li class="active">;<;a href="#">;Link <;span class="sr-only">;(current)<;/span>;<;/a>;<;/li>; 
 <;li>;<;a href="#">;Link<;/a>;<;/li>; 
 <;li class="dropdown">; 
 <;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">;Dropdown <;span class="caret">;<;/span>;<;/a>; 
 <;ul class="dropdown-menu">; 
 <;li>;<;a href="#">;Action<;/a>;<;/li>; 
 <;li>;<;a href="#">;Another action<;/a>;<;/li>; 
 <;li>;<;a href="#">;Something else here<;/a>;<;/li>; 
 <;li role="separator" class="divider">;<;/li>; 
 <;li>;<;a href="#">;Separated link<;/a>;<;/li>; 
 <;li role="separator" class="divider">;<;/li>; 
 <;li>;<;a href="#">;One more separated link<;/a>;<;/li>; 
 <;/ul>; 
 <;/li>; 
 <;/ul>; 
 <;form class="navbar-form navbar-left">; 
 <;div class="form-group">; 
 <;input type="text" class="form-control" placeholder="Search">; 
 <;/div>; 
 <;button type="submit" class="btn btn-default">;Submit<;/button>; 
 <;/form>; 
 <;ul class="nav navbar-nav navbar-right">; 
 <;li>;<;a href="#">;Link<;/a>;<;/li>; 
 <;li class="dropdown">; 
 <;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">;Dropdown <;span class="caret">;<;/span>;<;/a>; 
 <;ul class="dropdown-menu">; 
 <;li>;<;a href="#">;Action<;/a>;<;/li>; 
 <;li>;<;a href="#">;Another action<;/a>;<;/li>; 
 <;li>;<;a href="#">;Something else here<;/a>;<;/li>; 
 <;li role="separator" class="divider">;<;/li>; 
 <;li>;<;a href="#">;Separated link<;/a>;<;/li>; 
 <;/ul>; 
 <;/li>; 
 <;/ul>; 
 <;/div>;<;!-- /.navbar-collapse -->; 
 <;/div>;<;!-- /.container-fluid -->; 
 <;/nav>; 
 <;!--Akhir Navbar-->;</pre>
<p><strong>Penjelasan:</strong></p>
<p>Pada kode</p>
<pre class="lang:default decode:true "><;link href="css/bootstrap.min.css" rel="stylesheet"/>;</pre>
<p>kita memanggil css bootstrap dengan perintah external. Letak lokasi bootstrap.min.css harus disesuaikan dengan struktur folder yang anda gunakan.</p>
<p>Pada kode header diatas, sudah saya beri kode yang mana kode tersebut berfungsi untuk membuat navbar.</p>
<p> ;</p>
<p><strong>Footer.jsp</strong></p>
<pre class="lang:default decode:true "><;script src="https://code.jquery.com/jquery.js">;<;/script>; 
<;script src="js/bootstrap.min.js">;<;/script>; 
 <;/body>; 
<;/html>; 
</pre>
<p><strong>Penjelasan:</strong></p>
<p>kode</p>
<pre class="lang:default decode:true"><;script src="https://code.jquery.com/jquery.js">;<;/script>;</pre>
<p>digunakan untuk memanggil jquery secara online, jadi anda diharuskan dalam keadaan terkoneksi dengan internet. Apabila anda dalam keadaan offline akan terdapat disfungsi beberapa fitur dari bootstrap, salah satunya tidak berfungsinya dropdown.</p>
<p>Kode</p>
<pre class="lang:default decode:true"><;script src="js/bootstrap.min.js">;<;/script>;</pre>
<p>berfungsi untuk memanggil javascript bootstrap yang sudah kita download tadi.</p>
<p>Setelah membuat masing-masing kode pada <strong>header </strong>dan juga <strong>footer, </strong>sekarang kita akan memanggil kedua file tersebut agar menjadi satu-kesatuan tetapi tetap dalam file yang berbeda.</p>
<p>Sekarang buka file <strong>index.jsp </strong>anda, biasanya file ini langsung tersedia saat anda membuat project baru di netbeans. Lalu hapus kode yang lama, dan ganti dengan kode berikut ini:</p>
<p><strong>Index.jsp</strong></p>
<pre class="lang:default decode:true "><;%@include file="header.jsp" %>; 
 
<;h1>;Hello Bootstrap!<;/h1>; 
 
<;%@include file="footer.jsp" %>;</pre>
<p>Fungsi include diatas yaitu untuk memanggil file yang telah kita buat tadi.</p>
<p>Coba sekarang anda lakukan <em>running </em>pada project anda, dengan cara <strong>Klik Kanan project ->; Run</strong></p>
<p><a href="https://www.tutorialpedia.net/wp-content/uploads/2016/12/Screenshot_230.png"><img class="aligncenter size-large wp-image-2693" src="https://www.tutorialpedia.net/wp-content/uploads/2016/12/Screenshot_230-1024x338.png" alt="layouting template bootstrap" width="620" height="205" /></a></p>
<p>Nah jika tampil seperti pada gambar diatas, itu artinya anda telah berhasil melakukan layouting template bootstrap pada JSP <em>(java Server Pages).</em></p>
<p>Memang apasih manfaat dari melakukan layouting template bootsrap?</p>
<p>Salah satu manfaat membuat layouting template yaitu kita tidak perlu menulis kode yang sama secara berulang. Misal ketika kita ingin membuat halaman baru dengan header dan footer yang sama, kita tidak perlu mengcopy ualng header dan footer tersebut, tetapi cukup memanggil file header dan footer yang sudah kita pisah-pisahkan tadi.</p>
<p>Selain itu membuat layouting template bootstrap juga dapat menghemat kode yang anda gunakan.</p>
<p>Jika anda ingin mendownload project latihan Layouting Template Bootstrap Pada JSP, anda bisa mendownloadnya melalui link berikut:</p>
<p><span style="color: #0ace5f;"><strong><a style="color: #0ace5f;" href="https://drive.google.com/open?id=0B3AAqBr0BZavRWh5YmdCOUU3OWs" target="_blank">Google Drive</a></strong></span></p>
<p><em>Password : www.tutorialpedia.net</em></p>
<p> ;</p>
<p><em>Hosting java yang digunakan untuk demo tersebut hanya 2 minggu saja, Sejak postingan ini di terbitkan. karena menggunakan hosting trial dari jelastic.</em></p>
<p>Demikian tutorial <strong>Layouting Template Bootstrap Pada JSP.</strong></p>
<p>Selamat mencoba.</p>

Layouting Template Bootstrap Pada JSP
Recent Articles
Kumpulan DNS Gratis Tercepat!
DNS merupakan sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain atau hostname yang ada akan ditranslate dan...
Apa itu DNS ? Dan Fungsinya
Apa itu DNS? - DNS (Domain Name System) adalah sebuah sistem yang bertugas menyimpan semua informasi data domain dalam jaringan. Dengan adanya DNS, domain...
Apa itu OLT ? Serta Fungsinya Dalam Jaringan
Apa itu olt ? OLT (Optical Line Termination) adalah perangkat keras yang berfungsi sebagai titik akhir (end-point) dari layanan jaringan optik pasif (Passive Optical...
Template Voucher Untuk Mixradius
Template Voucher Untuk Mixradius - Pasti kalian bosen kan dengan template voucher default mixradius? tenang. kali ini saya akan memberikan template untuk voucher mixradius kamu agar...
Daftar Port Game Online Mikrotik Terbaru
Daftar port game online dibawah ini bisa digunakan untuk membuat rule agar koneksi ke game online tersebut bisa lancar, bisa juga untuk memisahkan antara...
Related Articles
1 Comment
Leave A Reply Cancel reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Cara membuat Halaman dinamis dengan menu bagaimana