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: [email protected] Twitter: @lokalevent_id Facebook: http://facebook.com/lokalevent_id

http://www.lokalevent.com/

java web application 2 - membuat template web

Education