Java web application 2 - membuat template web

KUTUONLINE 1
JAVA WEB APPLICATION 2 - MEMBUAT TEMPLATE WEBSITE
Template dalam pemrograman website merupakan sebuah kerangka yang terbagi
kedalam beberapa section, dimana masing-masing section memiliki fungsi yang berbeda.
Template dalam website terbagi kedalam empat bagian utama, yaitu header, content,
sidebar, dan footer. Untuk lebih jelasnya, perhatikan gambar dibawah ini.
Gambar 1. Model template website.
Dalam mendesain template website, perlu adanya file CSS (Cascading Style Sheet) yang
berguna untuk mempercantik halaman website. Namun pada prakteknya, penggunaan
CSS tidak hanya mempercantik halaman website saja, tata letak serta pembagian section
pun dapat kita atur didalam CSS. Sehingga didalam file utama program, programmer
hanya perlu memanggil nama class atau id yang telah didefinisikan didalam file CSS.
Untuk mempelajari lebih jelas mengenai CSS, silahkan searching via mbah Google.
Selain editor Netbeans 8.1 yang digunakan dalam pembuatan template website,
diperlukan satu editor tambahan yaitu Sublime Text3, Notepad++, Dreamweaver CS (all
version). Editor ini akan digunakan untuk membuat file CSS, karena didalam Netbeans
tidak terdapat ekstensi file *.css.
Header
Sidebar Content
Footer

KUTUONLINE 2
Berikut langkah-langkah membuat template website:
1. Jalankan aplikasi Netbeans, buat project baru dengan meng-klik menu File lalu pilih
New Project.
Gambar 2. New Project.
2. Pada jendela New Project - steps 1. Choose Project, pilih Java Web dikolom
Categories, dan pilih Web Application dikolom Projects.
3. Selanjutnya steps 2. Name and Location, set seperti yang terlihat pada gambar 3.
Lalu klik Next.
4. Klik Next saja pada steps 3. Server and Settings. Tidak ada yang perlu di setting
pada bagian ini. Lihat gambar 4.
5. Pada steps 5. Frameworks, abaikan bagian ini karena saat ini belum menggunakan
framework. Klik Finish. Lihat gambar 5.

KUTUONLINE 3
Gambar 3. Name and Location.
Gambar 4. Server and Settings.

KUTUONLINE 4
Gambar 5. Frameworks.
6. Maka akan segera ditampilkan jendela kerja Netbeans IDE.
7. Langkah selanjutnya adalah menyiapkan file *.css yang akan digunakan untuk
membentuk sebuah template. Ketik perintah CSS dibawah ini menggunakan editor
Sublime Text3 atau Notepad++.
*{margin: 0px; padding: 0px}
header, footer, section, nav{
display:blocks;
}
.container{
margin:0 auto;
margin-top:15px;
width:980px;
font-family: arial;
margin-top: 20px;
}
#main, #header{
overflow: auto;
}
#content{
float: left;

KUTUONLINE 5
width: 640px;
}
#sidebar{
float: right;
width: 320px;
}
#nav{
overflow: auto;
}
#nav ul{
list-style: none;
height: 30px;
padding: 0px;
margin: 10px;
}
#nav ul li{
float: left;
font-size: 12px;
font-weight: bold;
margin: 10px;
}
#footer{
overflow: auto;
background-color: #9C9;
}
Simpan dalam folder C:/xampp/htdocs/javaweb/webapplication2/web/style/style.css
Berikut struktur file CSS yang telah dibuat dalam project website.
Gambar 6. Struktur file CSS dalam project website.

KUTUONLINE 6
8. Berikutnya membuat file home.jsp yang digunakan untuk menampilkan halaman
awal dari website. Klik kanan pada Web Pages, pilih New, pilih JSP.
Gambar 7. Membuat file JSP.
9. Pada jendela New JSP, set File Name seperti yang terlihat pada gambar dibawah
ini. Lalu klik Finish.
Gambar 8. Menentukan nama file JSP.

KUTUONLINE 7
10. File home.jsp telah terbentuk lengkap dengan kerangka script JSP.
Gambar 9. File home.jsp.
11. Pada bagian script JSP, terdapat script komentar yang tidak diperlukan sehingga
script ini perlu dihapus agar website dapat ditampilkan. Perhatikan gambar berikut:
Gambar 10. Hapus script komentar.

KUTUONLINE 8
12. Tahap terakhir, mulailah menambahkan beberapa baris perintah dibawah ini untuk
membuat template website.
Script home.jsp
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style/style.css">
<title>Latihan template</title>
</head>
<body>

<header class="container" id="header">
<h1>Sistem Informasi Akuntansi</h1>
<h2>Bina Sarana Informatika</h2>
</header>


<nav class="container" id="nav">
<ul>
<li><a href="home.jsp">Beranda</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Logout</a></li>
</ul>
</nav>


<section class="container" id="main">
<section id="content">
<article>
<header>
<h1>SELAMAT DATANG DI WEBSITE KAMI</h1>
</header>
<p>
Puji syukur kepada Tuhan Yang Maha Esa, senantiasa mengiring
segala aktifitas dalam
dalam penyelesaian materi matakuliah Pemrograman Visual
Akuntansi. Sesuai dengan tebaran
kurikulum Program Studi Komputerisasi Akuntansi AMIK Bina Sarana
Informatika.
Pemrograman Visual Akuntansi terdapat pada semester 3, 4, dan 5.
Materi dikemas dengan menggabungkan

KUTUONLINE 9
unsur pengetahuan, keterampilan, sikap, teknik, dan pengalaman.
Unsur-unsur tersebut diharapkan
interaksi yang aktif antara mahasiswa dengan dosen di setiap proses
pembelajaran yang berlangsung.
</p>
<p> </p>
</article>
</section>
<aside id="sidebar">
<ul>
<li><a href="#">Akun</a></li>
<li><a href="#">Saldo Awal</a></li>
<li><a href="#">Informasi Perusahaan</a></li>
<li><a href="#">Periode Akuntansi</a></li>
</ul>
</aside>


<footer class="container" id="footer" align="center">
Selamat belajar dan semoga berhasil. 2016.
</footer>

</body>
</html>
Simpan di C:/xampp/htdocs/javaweb/webapplication2/web/home.jsp. Berikut
tampilan website saat dijalankan pada browser.
Gambar 11. Tampilan website pada browser.

KUTUONLINE 10
For your info
Join di http://www.lokalevent.com untuk mempromosikan event kamu via website.
Dengan mendaftar sebagai partner event di lokalevent, kamu akan memiliki halaman
Dashboard partner event untuk mengelola event kamu. Setiap event yang kamu publish
di website akan di publish pada sosial media kami, gratis!
Kami juga menyediakan jasa penayangan konten iklan pada halaman website lokalevent
untuk mempromosikan usaha yang kamu miliki.
Untuk informasi lebih lanjut biaya promo event dan pasang iklan, silahkan hubungi
marketing lokalevent di
Email: lokalevent.id@gmail.com
Twitter: @lokalevent_id
Facebook: http://facebook.com/lokalevent_id

Java web application 2 - membuat template web

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Java web application 2 - membuat template web

Similar to Java web application 2 - membuat template web (20)

More from Doni Andriansyah

More from Doni Andriansyah (20)

Recently uploaded

Recently uploaded (20)

Java web application 2 - membuat template web