Kode halaman kiri.jsp
advertisement
MODUL KULIAH
KELAS KARYAWAN – STTI NIIT I-TECH
Mata Kuliah
Pemrograman Berorientasi Object Lanjut
Semester
Genap 2012/2013
Kelas
Karyawan
Dosen
Muhammad Bagir MTI
Pertemuan : 3(Tiga)
Modul
3 (Tiga)
Topik
J2EE(JSP)
Sub Topik
HTML dan CSS
Materi
Tujuan
Waktu : Minggu, 10 Maret 2013
Membuat Frame
Menggunakan CSS
1. Mahasiswa dapat membuat suatu halaman web yang
dibagi-bagi dengan pembatas berupa frame
2. Mahasiswa dapat menambahkan style sheet yang
dapat menghiasi halaman web sehingga nampak lebih
menarik.
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
1.
Frame
Secara normal sebuah window browser menampilkan sebuah halaman web.
Elemen frame, digunakan selain body, yang memungkinkan untuk membagi
sebuah windows menjadi wilayah persegi empat yang dikenal dengan frame dan
mampu menampilkan halaman yang berbeda pada masing-masing frame.
Kemampuan untuk melakukan scroll, merubah size, dan identifikasi dari masingmasing frame dapat dikonfigurasikan menggunakan atributnya. Hyperlink dalam
sebuah frame dapat merubah isi tampilan framelainnya.
Frame seringkali digunakan untuk membagi sebuah window menjadi display
yang tetap dengan isi yang dinamis. Material tetap, seperti top banner, daftar isi,
logo, navigation bar, dan catatan hak cipta dapat diletakkan di dalam frame nya
sendiri dan selalu dibuat terlihat. Melakukan klik pada sebuah link dalam sebuah
frame yang tidak berubah dapat memperbaiki informasi yang ditampilkan di
dalam frame.
Untuk menggunakan frame, dibutuhkan atribut rows dan cols dari <frameset>
yang membagi window browser menjadi frame seperti gambar 3.1.
Gambar 3.1. Contoh Frame
Pada gambar 3.1 nilai untuk atribut cols =”25%,50%,25%” yang berarti bahwa
kolom pertama memiliki lebar 25% dan kolom kedua 50%, sementara atribut
rows=”80%,*” untuk kolom pertama, yang berarti bahwa tinggi baris adalah 80
persen dan sisanya menjadi bagian baris setelahnya. Nilai cols menyatakan lebar
masing-masing kolom dari kiri ke kanan. Nilai baris menyatakan tinggi masingmasing baris dari atas ke bawah.
Untuk mengimplementasikan pembuatan frame, buatlah sebuah proyek baru
dengan nama “membuatSIM” seperti gambar 3.2.
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
Gambar 3.2. Membuat Proyek Baru
Ubahlah kode halaman index.jsp dengan kode dibawah ini agar tampilannya
nampak seperti gambar 3.3.
Gambar 3.3. Membuat Halaman Frame
<%-Document
: index
Created on : Mar 7, 2013, 12:34:47 PM
Author
: bagir
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
<html>
<head>
<title>Contoh Pembuatan SIM berbasis WEB Kelas
Karyawan</title>
</head>
<frameset rows="25%,60%,*">
<frame name ="atas" src="atas.jsp" />
<frameset cols="20%,80%">
<frame name="kiri" src="kiri.jsp" />
<frame name="kanan" src="kanan.jsp" />
</frameset>
<frame name ="bawah" src="bawah.jsp" />
<noframes>
<p>Halaman ini menggunakan Frame tapi browser anda tidak
mendukung sayang....</p>
</noframes>
</head>
</html>
Buatlah sebuah folder dengan nama “KomponenFrame”
Gambar 3.4. Komponen Frame
Tambahkan sebuah folder baru gambar, kemudian masukkan gambar banner.jsp
ke dalamnya. Buatlah empat dokumen HTML dengan nama atas.jsp, kiri.jsp,
kanan.jsp dan bawah.jsp didalam folder komponen, dengan kode sbb:
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
Kode halaman atas.jsp :
<%-Document
: atas
Created on : Mar 7, 2013, 5:17:52 PM
Author
: bagir
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>Banner</title>
</head>
<body>
<img src="../gambar/banner.jpg alt=""></img>
</body>
</html>
Kode halaman kiri.jsp :
<!-To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
</head>
<body>
<ul><font style="font-size:20px ">
<li><a href="../isi/about.jsp"
target="kanan">About</a><br/></li>
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
<li><a href="../isi/register.jsp"
target="kanan">Register</a><br/></li>
<li><a href="../isi/login.jsp"
target="kanan">Login</a><br/></li>
<li><a href="../isi/order.jsp"
target="kanan">Order</a><br/></li>
</font>
</ul>
</body>
</html>
Kode halaman bawah.jsp :
<!-To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
</head>
<body>
<b><p align="center">
<font style="font-size:10px;" >
@copyright bagir2013
</font>
</body>
</html>
Batas Frame dan border pada halaman index.jsp dapat dihilangkan, frame juga
dapat dibuat tidak dapat diubah luasnya dengan menambahkan property
scrolling="no" noresize border="false"
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
2.
Menambahkan External CSS (Cascading Style Sheet)
CSS atau yang secara sederhana dikenal dengan style sheet, menawarkan
kemampuan gaya presentasi yang menarik dengan mengasosiasikan style-nya
ke elemen HTML. CSS memberikan kekuatan dan kontrol yang luar biasa dalam
memberikan tampilan halaman yang baik. Dengan CSS tampilan di browser
dapat diperindah, juga dapat melakukan pemformatan dokumen untuk dicetak ke
printer.
CSS adalah sebuah bahasa yang direkomendasikan oleh W3C dan didukung
oleh mayoritas browser, dalam menghadirkan gaya tampilan dokumen XHTML,
HTML dan dokumen lainnya. W3C bekerja untuk membuat CSS sebagai sebuah
standar industri. Pada tahun 1996 W3C membuat rekomedasi resmi pertama,
CSS level 1 (CSS1) yang memungkinkan untuk melakukan pemisahan style dari
isi dan memberikan kemampuan lebih dalam hal tampilan halaman web
dibandingkan sebelumnya.
CSS memiliki seperangkat aturan CSS yang dilampirkan didalam elemen HTML,
dengan melakukan pengendalian tampilannya. Masing-masing halaman web
boleh jadi memiliki sebuah file HTML dan seperangkat aturan CSS. Suatu
bahasa style sheet seperti CSS terdiri dari sebuah selector dan satu atau lebih
deklarasi style yang dipisahkan oleh tanda titik koma (;), oleh karenanya syntax
umum untuk style adalah
selector { property1 : value1 ;
selector
deklarasi
properti
value
H1 { font – size : 200 % ; font – weight : bold }
Property2 : value2 ;
....
Property-n ; value-n;
}
Untuk ujicoba, buatlah sebuah folder style dan file css dengan nama style.css,
kemudian lakukan pengkodean style dibawah ini :
body {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
color:#592a2a;
font-size:12px;
background-color:#ee1a02;
}
body > ul#menu-navigation-menu {
width:150px;
margin:0 auto 30px;
list-style-type:none;
padding:0;
font-size:18px;
line-height:14px;
}
body > ul#menu-navigation-menu > li {
padding:11px 0 12px;
border-bottom:1px solid #CCC;
}
body > ul#menu-navigation-menu > li.current-menu-item > a,
body > ul#menu-navigation-menu > li.current-menu-ancestor >
ul.sub-menu li.current-menu-item > a
{ color:#B42F26; }
body > ul#menu-navigation-menu > li > a {
display:block;
text-transform:uppercase;
}
body > ul#menu-navigation-menu ul.sub-menu {
display:none;
font-size:12px;
margin:0;
padding:0 0 0 2px;
list-style-type:none;
}
body > ul#menu-navigation-menu a,
body > ul#menu-navigation-menu a:visited {
color:#592a2a;
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
text-decoration:none;
}
body > ul#menu-navigation-menu a:hover {
color:#B42F26;
}
Kemudian pada halaman kiri.jsp, atas.jsp dab bawah.jsp dalam tag <HEAD>
tambahkan kode :
<link rel='stylesheet'
href='../style/style.css'
type='text/css' />
Perhatikan Hasilnya pada Halaman Layout Web.
Tambahkan sebuah halaman about.jsp, letakkan dalam folder dengan nama isi,
dan isikan teks ke dalamnya, klik About di sebelah kiri layar web, lalu perhatikan
hasilnya.
Gambar 3.5. membuat halaman about.jsp
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
Gambar 3.6. Tampilan Layout Web
@copyright 2013, Muhammad Bagir, MTI. Modul Perkuliahan Pemrograman Berorientasi Object
Lanjut, STTI I-Tech Semester Genap 2012-2013
