Home » Java » Layouting Template Bootstrap Pada JSP
layouting template pada bootstrap

Layouting Template Bootstrap Pada JSP

Cara membuat layouting template bootstrap pada umumnya hampir sama disetiap bahasa pemrograman, 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 untuk pemula. Pada artikel sebelumnya juga kita telah membahas tentang bagaimana cara menggunakan bootstrap, membuat crud dengan java web, dan membuat web sederhana dengan java. 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.

Untuk melakukan layouting template bootstrap pada jsp, ada beberapa hal yang dibutuhkan, yang paling utama yaitu file bootstrap. Anda bisa mengunduhnya melalui link berikut Download Bootstrap

Setelah di download ekstrak bootstrap-3.3.7-dist.zip lalu copy-paste ketiga folder css,js dan fonts pada project di netbeans tepat di dalam folder Web Pages. Baca : Membuat Project Baru di netbeans

layouting template bootstrap

Buat 2 file jsp baru dengan nama header.jsp dan footer.jsp.

layouting template bootstrap

isi kode header.jsp

Penjelasan:

Pada kode

kita memanggil css bootstrap dengan perintah external. Letak lokasi bootstrap.min.css harus disesuaikan dengan struktur folder yang anda gunakan.

Pada kode header diatas, sudah saya beri kode yang mana kode tersebut berfungsi untuk membuat navbar.

 

Footer.jsp

Penjelasan:

kode

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.

Kode

berfungsi untuk memanggil javascript bootstrap yang sudah kita download tadi.

Setelah membuat masing-masing kode pada header dan juga footer, sekarang kita akan memanggil kedua file tersebut agar menjadi satu-kesatuan tetapi tetap dalam file yang berbeda.

Sekarang buka file index.jsp anda, biasanya file ini langsung tersedia saat anda membuat project baru di netbeans. Lalu hapus kode yang lama, dan ganti dengan kode berikut ini:

Index.jsp

Fungsi include diatas yaitu untuk memanggil file yang telah kita buat tadi.

Coba sekarang anda lakukan running pada project anda, dengan cara Klik Kanan project -> Run

layouting template bootstrap

Nah jika tampil seperti pada gambar diatas, itu artinya anda telah berhasil melakukan layouting template bootstrap pada JSP (java Server Pages).

Memang apasih manfaat dari melakukan layouting template bootsrap?

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.

Selain itu membuat layouting template bootstrap juga dapat menghemat kode yang anda gunakan.

Jika anda ingin mendownload project latihan Layouting Template Bootstrap Pada JSP, anda bisa mendownloadnya melalui link berikut:

Google Drive

Password : www.tutorialpedia.net

 

Hosting java yang digunakan untuk demo tersebut hanya 2 minggu saja, Sejak postingan ini di terbitkan. karena menggunakan hosting trial dari jelastic.

Demikian tutorial Layouting Template Bootstrap Pada JSP.

Selamat mencoba.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

x

Check Also

login multi level

Login Multi Level Dengan Servlet dan JSP

Pada tutorial ini saya akan membahas tutorial tentang Cara membuat login multi level dengan servlet dan JSP. Memang apasih login ...